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

Answer 2

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

否则直接js

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

注意：如果你还需要设置文本

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

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

Answer 3

我在 jsfiddle 中创建了一个示例，

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

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

el.appendChild(li);

您可以通过 w3schools html dom 参考 了解如何使用 javascript 操作 html 元素。

但我认为更干净的方法是使用像 jQuery 这样的第三方库，这将允许更简单的方法来操作统治。

例如：如果使用 jQuery，这将像

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

编辑一样简单：
根据您的编辑，您可以尝试此操作，

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

这将获取

的第三个
• 并向其添加一个子列表

Answer 4

AFAIK，列表没有等效的 HTML DOM 对象。
无论如何你可以使用innerHTML：

var list = document.getElementById("list");
var item = "<li>New Item</li>";
list.innerHTML += item;