Javascript – inserisce in modo efficiente più elementi HTML

Mi piacerebbe creare un elemento select con un elenco di amici di Facebook di un utente (ottenuto come object JSON). I hardcode nel mio codice HTML, quindi utilizzare il seguente codice Javascript per analizzare il JSON e inserire ciascun amico come option dell’elemento select :

 var msgContainer = document.createDocumentFragment(); for (var i = 0; i < response.data.length; i++) { msgContainer.appendChild(document.createTextNode(''+response.data[i].name+'')); } document.getElementById("friends").appendChild(msgContainer); 

Funziona quasi, tranne che inserisce < e > invece di < e > . Come posso risolverlo, e c’è un modo più efficiente per inserire più elementi HTML usando puro Javascript (non JQuery)?

Non sei sicuro del motivo per cui stai creando un nodo di testo, ma sembrerebbe che tu voglia creare elementi di option , quindi potresti usare invece il costruttore di 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); 

Oppure puoi utilizzare il 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); 

È bello avere una funzione di supporto per creare elementi e impostare le proprietà allo stesso tempo.

Ecco un semplice esempio di uno:

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

Può essere ampliato per coprire alcune esigenze specifiche, ma ciò funzionerà nella maggior parte dei casi.

Lo useresti in questo modo:

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

Prova questo nel tuo ciclo for invece:

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