Question

我正在编写一个javascript函数，我从HTML中获取一个ul对象，并希望设置其中一个li elements in the ul`的文本。我在做：

list = document.getElementById('list_name');

然后我想使用循环访问列表的第li个元素。我有：

for (i = 0; i < 5; i++) {
    list[i].innerHTML = "<a>text</a>"; 
}

但这不起作用。这样做的正确方法是什么？

Answer 1

您需要访问li的子ul个元素。 JavaScript和DOM API无法为您自动执行此操作。

var list = document.getElementById('list_name'),
    items = list.childNodes;

for (var i = 0, length = childNodes.length; i < length; i++)
{
    if (items[i].nodeType != 1) {
       continue;
    }
    items[i].innerHTML = "<a>text</a>"; 
}

你可以也使用getElementsByTagName('li')，但它会获得所有后代li元素，而且你似乎只想要直接后代。< / p>

如果您愿意，也可以避免innerHTML。

var a = document.createElement('a'),
    text = document.createTextNode('text');

a.appendChild(text);
items[i].appendChild(a);

innerHTML可能会导致问题，例如丢失事件处理程序以及序列化和重新解析HTML结构的性能问题。但是，在您的示例中，这应该可以忽略不计。

Answer 2

jQuery示例代码，尽管其他代码工作：

$("#list_name li").text("<a href=''>text</a>");

使用jQuery更加简洁

Answer 3

您可以尝试以下

var el = document.createElement("li"),
    content = document.createTextNode("My sample text"),
    myUl = document.getElementById("ulOne");

el.appendChild(content);
el.id = "bar";

myUl.appendChild(el);

这是演示：http://jsfiddle.net/x32j00h5/

Answer 4

我更喜欢使用getElementsByTagName的方法，如果以某种方式获得额外的节点，如脚本标记或跨度，则会遇到问题。猜猜这段代码可以帮到你：

var list = document.getElementById("mylist");
var items = list.getElementsByTagName("li");
for(var i = 0, size = items.length; i< size; i++){
    items[i].innerHTML = "<a href='#'>LINK</a>";
}

想要设置ul的inner innerHTML

4 个答案: