问题描述
我想创建一个选择元素,其中包含用户的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元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!