TextNode oder innerHTML

Question

Angenommen, wir haben das folgende Element <p id="abc">Hello World</p>. Wenn ich den Inhalt in dem <p> Tag ändern möge habe ich zwei Möglichkeiten, in dem Javascript-Code:

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

Die Fragen sind:

• Welches sind die Differenz zwischen den zwei Lösungen?
  
• Welches sollte ich verwenden? Gibt es einen besser als den anderen?

Answer 1

Die erste wird alle HTML-Elemente löschen, die sich in Ihrem Zielelement befinden könnten. Die zweite funktioniert nur, wenn das erste Kind ein Textknoten ist (ein häufiger Fehler besteht darin, es auf einem leeren Element zu verwenden).

Die zweite ist "richtiger" (innerHTML ist wirklich eine haxe Abkürzung), aber die erste ist sicherlich zuverlässiger. Das heißt, es ist anfällig für XSS-Injektionen.

Um ganz korrekt zu sein, würden Sie dies tun:

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