TextNode o innerHTML

Question

Supponiamo di avere il seguente elemento <p id="abc">Hello World</p>. Se voglio modificare il contenuto nel tag <p> ho due modi nel codice javascript:

document.getElementById("abc").innerHTML="good morning"; 
document.getElementById("abc").firstChild.nodeValue="good morning"; 

Le domande sono:

• che sono la differenza tra le 2 soluzioni?
  
• Quale dovrei usare? C'è uno migliore dell'altro?

Answer 1

Il primo cancellerà qualsiasi elemento HTML che potrebbe essere all'interno dell'elemento di destinazione. Il secondo funzionerà solo se il primo figlio è un nodo di testo (un errore comune è provare ad usarlo su un elemento vuoto).

Il secondo è "più corretto" (innerHTML è davvero una scorciatoia haxy) ma il primo è sicuramente più affidabile. Detto questo, è vulnerabile alle iniezioni di XSS.

Per essere completamente corretta, si dovrebbe fare questo:

var abc = document.getElementById('abc'); 
while(abc.firstChild) abc.removeChild(abc.firstChild); 
abc.appendChild(document.createTextNode("good morning"));