Javascript - 有效地插入多个HTML元素

时间:2013-06-23 18:58:16

标签: javascript html getelementbyid appendchild

我想创建一个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);

除了插入&lt;&gt;而不是<>之外,这几乎无效。我该如何解决它,是否有更有效的方法使用纯Javascript(而不是JQuery)插入多个HTML元素?

2 个答案:

答案 0 :(得分:19)

不确定为什么要创建文本节点,但似乎您想要创建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);

答案 1 :(得分:0)

请在for循环中尝试此操作:

var o = document.createEleent('option');
o.setAttribute('value', response.data[i].id);
o.appendChild(document.createTextNode(response.data[i].name));
msgContainer.appendChild(o);