Est-il une méthode ou moyen en javascript pour ajouter un nœud enfant d'un élément de liste dynamiquement?

Si j'ai une liste non ordonnée comme

<ul id="list">
<li>Helo World-1</li>
<li>Helo World-2</li>
<li>Helo World-3</li>
</ul>

Je veux ajouter un sous-élément dynamique. Existe t'il une méthode en javascript pour le faire. Comment ai-je pu le faire.
modifier
J'ai besoin d'un élément au niveau suivant, c'est à dire une sous-liste de Helo Monde que je l'ai mentionné dans l'OP trop, quelque chose comme comme sous. Encore une question ici, c'est que j'ai besoin d'éléments pour être une partie intégrante de mon code.

 <ul id="list">
    <li>Helo World-1</li>
    <li>Helo World-2</li>
    <li>Helo World-3</li>
       <ul>
         <li>One</li>
         <li>Two</li>
      </ul>
 </ul>
Comment savez-vous à qui <li> vous devez ajouter les sous-éléments?
N'avez pas pensé à ça avant.Je pense que pour la 1ère ajouter à la fin, & une fois fait. Je Pourrais alors essayer de mettre en œuvre la méthode de Tim Bas mentionné c'est à dire ul.insertBefore(li, document.getElementById("list_item_id"));

OriginalL'auteur XCeptable | 2010-11-18

  1. 20

    En utilisant uniquement les méthodes du DOM:

    var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Your list item text"));

    Pour ajouter l'élément de la liste à la fin de la liste:

    ul.appendChild(li);

    Pour insérer l'élément de liste existant entre les éléments de la liste (à noter que vous auriez à donner à l'élément de liste existant un id dans cet exemple):

    ul.insertBefore(li, document.getElementById("list_item_id"));

    Mise à jour

    Si vous souhaitez ajouter une liste imbriquée, vous devez l'ajouter à un élément de liste plutôt que directement à l'intérieur de la liste dans l'ordre pour qu'il soit valable:

    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 insertBefore l'inclusion. +1
    merci Tim, mais même chose, c'est ici. Son ajout sur le 1er niveau, j'ai besoin de sous niveau de l'élément ajouté.
    pouvez vous de bien vouloir prendre en accoubt Tim mes modifications
    merci Beaucoup Tim. Pouvez-vous l'obligeance de nous mettre tous ensemble du code qui est nécessaire pour ajouter imbriquée élément de la liste. Bec je ne suis pas sûr de savoir comment dois-je les fusionner ce code avec celui que vous avez saisi plus tôt que vous avez utilisé tagName propriété de l'élément qui est emballé dans l'extrait de code.
    Je pense que vous pouvez utiliser documentFragment pour améliorer les performances

    OriginalL'auteur Tim Down

  2. 2

    J'ai créé un exemple dans jsfiddle

    var el = document.getElementById("list");

var li = document.createElement("li");
li.innerHTML = "item";

el.appendChild(li);

    Vous pouvez passer par la w3schools dom html de référence pour voir comment on peut manipuler les éléments html à l'aide de javascript.

    Mais je pense que le moyen le plus propre est d'utiliser une bibliothèque tierce comme jQuery qui permettra à un moyen beaucoup plus facile de manipuler le dom.

    ex: Si l'utilisation de jQuery, ce sera aussi facile que de

    $("<li>...</li>").appendTo("#list")

    EDIT:
    Basé sur votre montage, vous pouvez essayer ce,

    var ul = document.getElementById("list");
ul.children[2].innerHTML = "<ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>";

    Ce sera la 3ème <li> de la <ul> et ajouter une sous-liste à il

    merci Arun, ce dont j'ai besoin est un sous-niveau de la liste de Helo monde. J'ai ajouté des détails à ma question.
    J'ai mis à jour ma réponse à inclure une sous-liste

    OriginalL'auteur Arun P Johny

  3. 1
    $('<li>...</li>').appendTo($('#list')); /* in jquery */

    simple js

    var mylist = document.getElementById('list');
mylist.appendChild(document.createElement('li'));

    Remarque: si vous avez besoin de mettre du texte 

    var mylist = document.getElementById('list');
var newli  = document.createElement('li');

newli.innerHTML('Helo World ' + mylist.getElementsByTagName('li').length + 1);
mylist.appendChild(newli);

    OriginalL'auteur

  4. 0

    Autant que je sache, il n'y a pas d'équivalent HTML DOM objet de la liste.
    De toute façon, vous pouvez utiliser le innerHTML:

    var list = document.getElementById("list");
var item = "<li>New Item</li>";
list.innerHTML += item;
    C'est un très mauvais moyen de le faire, .innerHTML va effacer tous les gestionnaires d'événements et de provoquer d'autres problèmes.

    OriginalL'auteur jerjer