將數組追加到無序列表

我試圖用這個代碼來完成的事情是將數組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!"); 
}

來源

2010-08-26 nnash

請勿使用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); 
    } 

}

來源

2010-08-26 15:11:34

謝謝，這個完美的作品;我會在'.innerHTML'上做一些閱讀。 indexNum的目的是增加數組索引值的一種駭人的方式。看看你的代碼顯然我做錯了。 – nnash 2010-08-26 15:47:07

可以使用的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。

來源

2010-08-26 15:28:28

如果您打算使用DOM，您還應該使用文本節點（'myElement.appendChild（document.createTextNode（alphabet [indexNum ++]））'而不是innerHTML。另外，對於XHTML兼容性，您希望在'createElement'調用中使用'li'而不是'LI'。 – 2010-08-26 16:55:07

儘量減少對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重繪

來源

2010-08-26 17:12:40 Andreas

這應該是頭號。我從來沒有見過或聽說過這個。 – tjklemz 2013-09-22 03:02:32

將數組追加到無序列表

回答

相關問題