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

Posted 2023-05-09

【中文标题】Javascript - 有效地插入多个 HTML 元素

【英文标题】：Javascript - efficiently insert multiple HTML elements

【发布时间】：2013-06-20 07:02:16

【问题描述】：

我想创建一个select 元素，其中包含用户的 Facebook 好友列表（作为 JSON 对象获得）。我将 <select id="friends"></select> 硬编码到我的 html 中，然后使用以下 javascript 代码解析 JSON 并将每个朋友插入为 select 元素的 option：

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 元素？

【参考方案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);

【讨论】：

谢谢！一种方法更有效吗？

@1''：我不会再考虑性能了。就个人而言，我会创建一个元素创建器辅助函数，让您可以创建任何元素并同时设置一堆属性。

第二个变体效率低下而且非常糟糕（在循环中附加元素），所以首选第一个。

感谢@dfsq 的澄清！

该死，我的错！你是对的，这是我的一天。无论如何，我赞成你的回答，所以没有冒犯:)

【参考方案2】：

在你的 for 循环中试试这个：

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