Javascript - 高效插入多个 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17264182/
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
Javascript - efficiently insert multiple HTML elements
提问by 1''
I'd like to create a selectelement with a list of a user's Facebook friends (obtained as a JSON object). I hardcode <select id="friends"></select>into my HTML, then use the following Javascript code to parse the JSON and insert each friend as an optionof the selectelement:
我想创建一个select包含用户 Facebook 好友列表的元素（作为 JSON 对象获取）。我硬编码<select id="friends"></select>到我的HTML，然后使用下面的JavaScript代码来解析JSON并插入每个朋友作为option该的select元素：
var msgContainer = document.createDocumentFragment();
for (var i = 0; i < response.data.length; i++) {
msgContainer.appendChild(document.createTextNode('<option value="'+response.data[i].id+'">'+response.data[i].name+'</option>'));
}
document.getElementById("friends").appendChild(msgContainer);
This almost works, except that it inserts <and >instead of <and >. How can I fix it, and is there a more efficient way to insert multiple HTML elements using pure Javascript (not JQuery)?
这几乎有效，除了它插入<and>而不是<and >。我该如何修复它，是否有更有效的方法来使用纯 Javascript（而不是 JQuery）插入多个 HTML 元素？
回答by
Not sure why you're creating a text node, but it would seem that you want to create optionelements, so you could use the Optionconstructor instead.
不确定为什么要创建文本节点，但您似乎想要创建option元素，因此可以改用Option构造函数。
var msgContainer = document.createDocumentFragment();
for (var i = 0; i < response.data.length; i++) {
msgContainer.appendChild(new Option(response.data[i].name, response.data[i].id));
}
document.getElementById("friends").appendChild(msgContainer);
Or you can use the generic document.createElement().
或者您可以使用通用的document.createElement().
var msgContainer = document.createDocumentFragment();
for (var i = 0; i < response.data.length; i++) {
var option = msgContainer.appendChild(document.createElement("option"));
option.text = response.data[i].name;
option.value = response.data[i].id;
}
document.getElementById("friends").appendChild(msgContainer);
It's nice to have a helper function for creating elements and setting properties at the same time.
有一个可以同时创建元素和设置属性的辅助函数是很好的。
Here's a simple example of one:
这是一个简单的例子：
function create(name, props) {
var el = document.createElement(name);
for (var p in props)
el[p] = props[p];
return el;
}
It can be expanded to cover some specific needs, but this will work for most cases.
它可以扩展以涵盖某些特定需求，但这适用于大多数情况。
You'd use it like this:
你会像这样使用它：
var msgContainer = document.createDocumentFragment();
for (var i = 0; i < response.data.length; i++) {
msgContainer.appendChild(create("option", {
text: response.data[i].name,
value: response.data[i].id
}));
}
document.getElementById("friends").appendChild(msgContainer);
回答by ElGavilan
Try this in your for loop instead:
在你的 for 循环中试试这个：
var o = document.createEleent('option');
o.setAttribute('value', response.data[i].id);
o.appendChild(document.createTextNode(response.data[i].name));
msgContainer.appendChild(o);
