Si j'ai une liste non ordonnée comme je souhaite ajouter un élément subliste de manière dynamique. Y a-t-il une méthode dans JavaScript pour le faire. Comment pourrais-je le faire?
edit
J'ai besoin d'un article au niveau suivant, c'est-à-dire une sous-liste de Helo World que j'ai mentionné en Op aussi, comme cela. Un autre problème ici est que j'ai besoin que les articles soient une partie permanente de mon code.
4 Réponses :
var mylist = document.getElementById('list');
var newli = document.createElement('li');
newli.innerHTML('Helo World ' + mylist.getElementsByTagName('li').length + 1);
mylist.appendChild(newli);
afaik, il n'y a pas d'objet HTML DOM équivalent pour la liste. En tout cas, vous pouvez utiliser le InnerHTML:
var list = document.getElementById("list");
var item = "<li>New Item</li>";
list.innerHTML += item;
C'est une façon très mauvaise de le faire, .innerhtml effacera tous les gestionnaires d'événements et entraînera d'autres problèmes.
J'ai créé un échantillon dans jsfiddle Vous pouvez parcourir le W3schools HTML DOM Référence pour voir comment nous pouvons manipuler les éléments HTML en utilisant JavaScript. P> Mais je pense que la manière plus propre sera d'utiliser une bibliothèque tierce partie comme jQuery qui permettra un moyen beaucoup plus facile de manipuler le DOM. p> EX: Si utilisez jQuery, cela sera aussi simple que P> var ul = document.getElementById("list");
ul.children[2].innerHTML = "<ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>";
Thanx ARUN, ce dont j'ai besoin est une liste Sublevel à Helo World. J'ai ajouté des détails à ma question.
Utilisation des méthodes pure DOM:
var lis = ul.getElementsByTagName("li");
var lastLi = lis[lis.length - 1];
var nestedUl = document.createElement("ul");
var nestedLi = nestedUl.appendChild(document.createElement("li"));
nestedLi.appendChild(document.createTextNode("One"));
lastLi.appendChild(nestedUl);
Nice Insérer avant Inclusion. +1
merci Tim mais la même chose est ici. Son article ajout du 1er niveau, j'ai besoin d'un élément de sous-niveau ajouté.
merci beaucoup tim. Pouvez-vous gentiment mettre tout le code ensemble qui est nécessaire pour ajouter un élément de liste imbriquée. Bec, je ne sais pas comment dois-je fusionner ce code avec un que vous avez mis plus tôt à mesure que vous utilisiez la propriété TAGName d'élément citée dans le code de code.
@Yurikolovsky: Pas dans cette situation: créer un élément et tous ses enfants avant de l'ajouter au DOM est aussi bon que vous pouvez le faire. Un DocumentfraGment ne ferait qu'aider que si vous insérez plusieurs éléments de frère de sotage au même point de la DOM.
Cela ne fonctionne pas. Dernier appel LastLi.AppendChild (Nesdul) échouera. JSFDDLER
@Chrisji: Non, ça marche bien. Le problème de votre jsfiddle est que vous avez manqué la ligne qui déclare la variable ul . Voir Jsfiddle.net/dfhwd/222
Comment savez-vous que vous devez ajouter les sous-éléments?
Ne pensaient pas qu'avant.Je pense à 1er ajoutez-les à la fin, et une fois terminé. Je pourrais alors essayer de mettre en œuvre la méthode Tim Down mentionnée I.E. UL.INSERTBEPore (li, document.getelementByID ("list_item_id"));