Javascript - 高效地插入多個HTML元素

我想創建一個select元素與用戶的Facebook朋友列表（作爲JSON對象獲得）。我硬編碼<select id="friends"></select>到我的HTML，然後使用下面的JavaScript代碼來解析JSON並插入每個朋友作爲select元素的option：Javascript - 高效地插入多個HTML元素

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

來源

2013-06-23 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);

來源

2013-06-23 19:05:00

謝謝！一種方法更有效嗎？ –

@ 1「：我不會在這裏再次表現演出。就我個人而言，我會創建一個元素創建器輔助函數，它可以讓您創建任何元素並同時設置一組屬性。 –

第二個變體是效率低下且相當糟糕的做法（在循環中附加元素），所以第一個變量是首選。 – dfsq

試試這個在您的for循環，而不是：

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

來源

2013-06-23 19:09:13 ElGavilan

Javascript - 高效地插入多個HTML元素

回答

相關問題