想要设置ul的inner innerHTML

Question

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

list = document.getElementById('list_name');

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

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元素,而你似乎只想要直接后代.

innerHTML如果你愿意,你也可以避免.

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

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

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