javascript javascript中是否有任何方法/方式可以动态地将子节点添加到列表元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4214948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any method/way in javascript to add a child node to list element dynamically?
提问by XCeptable
If I have an unordered list like
如果我有一个无序列表，比如
<ul id="list">
<li>Helo World-1</li>
<li>Helo World-2</li>
<li>Helo World-3</li>
</ul>
I want to add a sublist item to it dynamically. Is there any method in javascript to do that. How could I do it. editI need an item at next level, i.e. a sub list of Helo World that I mentioned in OP too, something like as under. One more issue here is that I need the items to be a permanent part of my code.
我想动态地向它添加一个子列表项。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>
回答by Tim Down
Using pure DOM methods:
使用纯 DOM 方法：
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Your list item text"));
To add the list item to the end of the list:
要将列表项添加到列表末尾：
ul.appendChild(li);
To insert the list item between existing list items (note you'd have to give the existing list item an id in this example):
要在现有列表项之间插入列表项（请注意，在此示例中，您必须为现有列表项指定一个 id）：
ul.insertBefore(li, document.getElementById("list_item_id"));
Update
更新
If you want to add a nested list, you'll need to add it to a list item rather than directly inside the list in order for it to be valid:
如果要添加嵌套列表，则需要将其添加到列表项中，而不是直接添加到列表内，以使其有效：
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);
回答by Arun P Johny
I've created a sample in jsfiddle
我在jsfiddle 中创建了一个示例
var el = document.getElementById("list");
var li = document.createElement("li");
li.innerHTML = "item";
el.appendChild(li);
You can go through the w3schools html dom referenceto see how we can manipulate the html elements using javascript.
您可以通过w3schools html dom 参考了解我们如何使用 javascript 操作 html 元素。
But I think the cleaner way will be to use a third party library like jQuerywhich will allow a much easier way to manipulate the dom.
但我认为更简洁的方法是使用像jQuery这样的第三方库，这样可以更轻松地操作 dom。
ex: If use jQuery this will be as easy as
例如：如果使用 jQuery，这将很简单
$("<li>...</li>").appendTo("#list")
EDIT: Based on your edit you can try this,
编辑：根据你的编辑，你可以试试这个，
var ul = document.getElementById("list");
ul.children[2].innerHTML = "<ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>";
This will get the 3rd <li>of the <ul>and add a sublist to it
这将获得第 3<li>个<ul>并为其添加子列表
回答by Arun P Johny
$('<li>...</li>').appendTo($('#list')); /* in jquery */
otherwise straight js
否则直接js
var mylist = document.getElementById('list');
mylist.appendChild(document.createElement('li'));
Note: if you need to set also text
注意：如果您还需要设置文本
var mylist = document.getElementById('list');
var newli = document.createElement('li');
newli.innerHTML('Helo World ' + mylist.getElementsByTagName('li').length + 1);
mylist.appendChild(newli);
回答by jerjer
AFAIK, there is no equivalent HTML DOM object for list. Anyway you can use the innerHTML:
AFAIK，列表没有等效的 HTML DOM 对象。无论如何你可以使用innerHTML：
var list = document.getElementById("list");
var item = "<li>New Item</li>";
list.innerHTML += item;
