Javascript 将数组追加到无序列表_Javascript_Arrays_Markup

Javascript 将数组追加到无序列表

javascript arrays

Javascript 将数组追加到无序列表,javascript,arrays,markup,Javascript,Arrays,Markup,我试图用这段代码完成的是将数组字母表作为一系列列表项输出到实际标记中现有的无序列表中。我已将数组放入列表项中，但我不知道如何告诉它将自身附加到现有无序列表中 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","

我试图用这段代码完成的是将数组

字母表作为一系列列表项输出到实际标记中现有的无序列表中。我已将数组放入列表项中，但我不知道如何告诉它将自身附加到现有无序列表中
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!");
}

var itemsExist=true；
var indexNum=0；
var unorderedList=document.getElementById（'itemList'）；
var字母=新数组（“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”）；
函数write_letters（）{
对于（i=0；i”+字母[indexNum++]+”'）；
}
}
如果（性别歧视）{
写字母（）；
}否则{
文档。写入（“错误！”）；
}
不要使用文档。编写即可。你应该这样做：
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;
}

函数写入字母（）{
var字母=”；
对于（变量i=0；i”+字母表[indexNum++]+“”；
字母+=“”+字母表[i]+“”；
}
document.getElementById（“itemList”）.innerHTML=字母；
}

更合适的方法是使用DOM（如果您想完全控制即将发生的事情）：
函数写入字母（）{
var items=document.getElementById（“itemList”）；
对于（变量i=0；i
您可以使用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>


脚本测试

var itemsExist=true；
var indexNum=0；
var unorderedList=document.getElementById（'itemList'）；
var字母=新数组（“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”）；
髓鞘变元；
函数write_letters（）{
对于（i=0；i元素
myElement=document.createElement（“LI”）；
//在标记之间添加字母
myElement.innerHTML=字母表[indexNum++]；
//将附加到元素的底部
无序列表。appendChild（myElement）；
}
}
如果（性别歧视）{
写字母（）；
}否则{
文档。写入（“错误！”）；
}

注意脚本是如何存在于body标记下面的。如果您想让脚本按照您编写的方式工作，这一点很重要。否则document.getElementById（'itemList'）将找不到'itemList'ID。
尝试尽可能减少DOM上的操作。unorderedList
上的每个appendChild都会强制浏览器重新呈现整个页面。用于那种动作
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操作会强制进行完整的重画，而不是字母表；我将阅读.innerHTML
。indexNum的用途是一种增加数组索引值的黑客方法。看看你的代码，很明显我做错了。如果你要使用DOM，你也应该使用文本节点（myElement.appendChild（document.createTextNode（alphabet[indexNum++]））
），而不是innerHTML。另外，为了实现XHTML兼容性，您希望在createElement
调用中使用li
而不是li。我以前从未见过或听说过这件事。
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);