将一个数组添加到无序列表中

Question

将一个数组添加到无序列表中

3

我尝试通过这段代码输出数组alphabet作为一系列列表项插入到实际标记中的现有无序列表中。我已经将数组转换为列表项，但我不知道如何告诉它将自己附加到现有的无序列表<ul id="itemList"></ul>中。

var itemsExist = true;
var indexNum = 0;
var unorderedList = document.getElementById('itemList');
var alphabet= new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");

function write_letters(){

    for (i = 0; i < alphabet.length; i++ ) {
        document.write('<li>'  + alphabet[indexNum++] + '</li>');
    }

}

if (itemsExist){
    write_letters();
} else {
    document.write("error!");
}

- nnash

3个回答

2

您可以使用createElement()和appendChild()的组合，向另一个HTML元素内添加新的HTML元素。下面的代码应该适用于您：

<html>

<head>
<title>Script Test</title>
</head>

<body>
    <ul id="itemList"></ul>
</body>

<script>
    var itemsExist = true;
    var indexNum = 0;
    var unorderedList = document.getElementById('itemList');
    var alphabet= new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
    var myElement;

    function write_letters(){

        for (i = 0; i < alphabet.length; i++ ) {
            // Create the <LI> element
            myElement = document.createElement("LI");
            // Add the letter between the <LI> tags
            myElement.innerHTML = alphabet[indexNum++];
            // Append the <LI> to the bottom of the <UL> element
            unorderedList.appendChild(myElement);
        }
    }

    if (itemsExist){
        write_letters();
    } else {
        document.write("error!");
    }
</script>

</html>

请注意脚本位于body标签下方。如果想让脚本按照你编写的方式工作，这一点非常重要。否则，document.getElementById('itemList')将无法找到“itemList”ID。

- Joe D

如果您要使用DOM，应该使用文本节点(myElement.appendChild(document.createTextNode(alphabet[indexNum++])))而不是innerHTML。此外，为了XHTML兼容性，您需要在createElement调用中使用li而不是LI。 - Eli Grey

2

尽可能减少对DOM的操作。在unorderedList上的每个appendChild都会强制浏览器重新渲染整个页面。使用documentFragement来执行此类操作。

var frag = document.createDocumentFragment();
for (var i = alphabet.length; i--; ) {
   var li = document.createElement("li");
   li.appendChild(document.createTextNode(alphabet[indexNum++]));
   frag.appendChild(li);
}
unorderedList.appendChild(frag);

因此，只会有一个DOM操作，强制进行完整的重绘，而不是alphabet.length次重绘。

- Andreas

这应该是第一位的。我以前从未见过或听说过这个。 - tjklemz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel O'Hara · Accepted Answer

不要使用 document.write 来实现它。你应该这样做：

function write_letters(){
    var letters = "";

    for (var i = 0; i < alphabet.length; i++ ) {
        //Also I don't understand the purpose of the indexNum variable.
        //letters += "<li>"  + alphabet[indexNum++] + "</li>";
        letters += "<li>"  + alphabet[i] + "</li>";
    }

    document.getElementById("itemList").innerHTML = letters;
}

更加适当的方式是使用DOM（如果您想完全控制所要获取的内容）：

function write_letters(){
    var items = document.getElementById("itemList");

    for (var i = 0; i < alphabet.length; i++ ) {
        var item = document.createElement("li");
        item.innerHTML = alphabet[i];
        items.appendChild(item);
    }

}