Javascript - 高效插入多个 HTML 元素

Question

我想创建一个 select包含用户 Facebook 好友列表的元素(作为 JSON 对象获取)。我硬编码 <select id="friends"></select>到我的 HTML 中，然后使用以下 Javascript 代码解析 JSON 并将每个 friend 作为 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);

这几乎可以工作，只是它插入了 <和 >而不是 <和 > .我该如何修复它，是否有更有效的方法使用纯 Javascript(而非 JQuery)插入多个 HTML 元素？

Answer 1

不确定为什么要创建文本节点，但看起来您想要创建 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);

---

或者您可以使用通用的 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);

---

有一个用于同时创建元素和设置属性的辅助函数真是太好了。

这里有一个简单的例子:

function create(name, props) {
    var el = document.createElement(name);
    for (var p in props)
        el[p] = props[p];
    return el;
}

它可以扩展以满足某些特定需求，但这适用于大多数情况。

你会像这样使用它:

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);