在javascript中是否有任何方法/方法可以动态地将子节点添加到列表元素中？

Question

如果我有一个无序列表,如

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

我想动态添加一个子列表项.在javascript中有没有任何方法可以做到这一点.我怎么能这样做 编辑 我需要一个下一级别的项目,也就是我在OP中提到的Helo World的子列表,就像下面的那样.这里还有一个问题是我需要将这些项目作为我代码的永久部分.

 <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> 

Answer 1

使用纯DOM方法:

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

要将列表项添加到列表的末尾:

ul.appendChild(li);

在现有列表项之间插入列表项(请注意,在此示例中,您必须为现有列表项指定一个id):

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

更新

如果要添加嵌套列表,则需要将其添加到列表项而不是直接在列表中,以使其有效:

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);