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

Solutions Collecting From Web of "Javascript – inserisce in modo efficiente più elementi HTML"

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