想要设置ul的liinnerHTML

我正在编写一个 javascript 函数，我得到一个ul来自我的 HTML 的对象并想要设置其中之一的文本li elements in theul`。我正在做：

list = document.getElementById('list_name');

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

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

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

您需要访问孩子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>"; 
}

You could也使用getElementsByTagName('li')但它会得到all后裔li元素，看来你只想要直系后代。

你也可以避免innerHTML如果你想。

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

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

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