javascript 将数组附加到无序列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3576482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Append an Array to an Unordered List
提问by nnash
What I'm trying to accomplish with this code is to output the array alphabetas a series of list items into an existing unordered list in the actual markup. I've got the array into list items, but I can't figure out how to tell it to append itself to an existing unordered list <ul id="itemList"></ul>.
我试图用这段代码完成的是将数组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!");
}
回答by Daniel O'Hara
Don't use document.writeto do it. You should act like this:
不要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;
}
More proper way is to use DOM (in case you want full control of what's coming on):
更正确的方法是使用 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);
}
}
回答by Joe D
You can use a combination of createElement() and appendChild() to add new HTML elements within another HTML element. The code below should work for you:
您可以结合使用 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>
Note how the script exists below the body tag. This is important if you want your script to work the way you wrote it. Otherwise document.getElementById('itemList') will not find the 'itemList' ID.
请注意该脚本如何存在于 body 标记下方。如果您希望脚本按照您编写的方式工作，这一点很重要。否则 document.getElementById('itemList') 将找不到 'itemList' ID。
回答by Andreas
Try to reduce the actions on the DOM as much as possible. Every appendChild on unorderedListforces the browser to re-render the complete page. Use documentFragementfor that sort of action.
尽量减少对 DOM 的操作。每个 appendChild onunorderedList强制浏览器重新呈现完整页面。使用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);
So there will be only one DOM action which forces a complete redraw instead of alphabet.lengthredraws
因此，只有一个 DOM 操作会强制执行完整的重绘而不是alphabet.length重绘
