Javascript - çok sayıda HTML öğesini etkin bir şekilde ekleyin

Question

Bir kullanıcının Facebook arkadaşlarının bir listesini (bir JSON nesnesi olarak elde edilir) içeren bir select öğesi oluşturmak istiyorum. Benim HTML içine <select id="friends"></select> hardcode ardından JSON ayrıştırmak için aşağıdaki JavaScript kodu kullanabilirsiniz ve select elemanın bir option olarak her arkadaş ekleyin:

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

neredeyse < ve > yerine < ekler dışında çalışır Bu ve >. Bunu nasıl düzeltebilirim ve saf Javascript (JQuery değil) kullanarak birden çok HTML öğesi eklemek için daha verimli bir yol var mı?

Answer 1

Neden bir metin düğümü oluşturduğunuzdan emin değilsiniz, ancak option öğelerini oluşturmak istediğinize benziyordu, bu nedenle Option yapıcısını kullanabilirsiniz.

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

---

Yoksa jenerik document.createElement() kullanabilirsiniz.

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

---

Bu unsurları oluşturmak ve aynı zamanda özelliklerini ayarlamak için bir yardımcı işlevi olması güzel.

İşte birinin basit bir örnek: Bazı özel ihtiyaçlarını karşılamak için genişletilebilir

function create(name, props) { 
    var el = document.createElement(name); 
    for (var p in props) 
     el[p] = props[p]; 
    return el; 
} 

, ancak bu çoğu durumda işe yarayacaktır.

Böyle kullanmak istiyorum:

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

Answer 2

yerine döngü Gözlerinde farklı bu deneyin:

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