InnerHTML crea nodes nell’albero DOM?

Se faccio questo:

document.getElementById("myDiv").innerHTML = "some_html_code"; 

creerò nodes nel mio DOM tre come se appendChild() ?

Il motivo per cui mi chiedo è che sto creando un’applicazione mobile in cui l’utilizzo della memoria deve essere basso. Non voglio creare molti nodes.

È più o meno lo stesso di

 var div = document.getElementById("myDiv"); while( div.firstChild ) { div.removeChild( div.firstChild ); } div.appendChild( document.createTextNode("a_html_string") ); 

Ovviamente, se per "html_string" si intende una stringa composta da html complesso, allora ovviamente i nodes vengono creati dall’html come appropriato (nodes elemento, nodes di commento, nodes di testo, ecc.). Ma una semplice stringa di testo è semplicemente un singolo nodo di testo.

Quindi se la tua stringa html fosse '

world

' , sarebbe approssimativamente:

 var div = document.getElementById("myDiv"); while( div.firstChild ) { div.removeChild( div.firstChild ); } var anotherDiv = document.createElement("div"); anotherDiv.setAttribute("id", "hello"); anotherDiv.appendChild(document.createTextNode("world")); div.appendChild(anotherDiv); 

Probabilmente è scioccante quanto stia accadendo con un setter semplice e innocente .innerHTML , e questo non include nemmeno l’analisi dell’html.

È importante notare che nulla di tutto questo è spazzatura, tutti gli oggetti creati sono necessari. Per assicurarsi di creare solo nodes necessari, non utilizzare spazi bianchi non necessari tra i nodes. Per esempio

 hello world 

sono 3 nodes di testo ma

 hello world 

è solo 2 nodes di testo.

Molto tempo fa ho creato un jsfiddle facetious che converte html in “codice DOM” per tutti coloro che odiano gli odiatori di.

Sì, l’ innerHTML verrà analizzato e verranno creati i nodes. Non c’è modo di aggirarlo, il DOM è fatto di nodes.

Creerà la stringa “a_html_string” e verrà visualizzata. ma puoi anche aggiungere elementi:

 document.getElementById("myDiv").innerHTML = " Link "; // will be displayed "Link"