Javascript - 高效地插入多个HTML元素 [英] Javascript - efficiently insert multiple HTML elements

问题描述

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


  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]。名称+' < /选项>'））; 
} 
 document.getElementById（friends）。appendChild（msgContainer）; 
  

除了它插入& lt; 和& gt; 而不是< 和> 。我该如何解决这个问题，是否有更高效的方式使用纯Javascript（而不是JQuery）插入多个HTML元素？ >不知道你为什么要创建一个文本节点，但似乎你想创建选项元素，所以你可以使用 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）; 
  

I'd like to create a select element 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 option of the select element:

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

解决方案

Not sure why you're creating a text node, but it would seem that you want to create option elements, so you could use the Option constructor instead.

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().

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

这篇关于Javascript - 高效地插入多个HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！