2015-07-26 10 views
10

Was hat den Vorteil, dass Sie einen TextNode erstellen und ihn an ein HTML-Element anhängen, anstatt seinen textContent direkt zu setzen?TextNode oder TextContent?

Sagen wir, ich habe eine Spanne.

var span = document.getElementById('my-span'); 

Und ich möchte seinen Text ändern. Was ist der Vorteil der Verwendung:

var my_text = document.createTextNode('Hello!'); 
span.appendChild(my_text); 

über

span.textContent = 'hello';

Antwort

12

Es ist nicht wirklich wichtig, von Vorteil, aber der richtigen Nutzung abhängig von der Notwendigkeit.

Der wesentliche Unterschied besteht darin, dass:

  • createTextNode() ein Verfahren ist, und funktioniert genauso wie der Name schon sagt: es ein Element ... erstellt dann müssen Sie etwas mit ihm tun (wie in Ihrem Beispiel, wo Sie anhängen als Kind);
    so ist es sinnvoll, wenn Sie ein neues Element haben wollen und legen Sie es irgendwo
  • textContent ist eine Eigenschaft, die Sie erhalten oder setzen kann, mit einer eindeutigen Aussage und sonst nichts;
    so ist es sinnvoll, wenn Sie nur den Inhalt eines bereits ändern möchten bestehende Element

nun in der präzisen Fall Ihrer Frage, Sie sagten, Sie zu ändern wollen den Text der Element ...
Um es noch deutlicher zu sagen, dass Sie das folgende HTML-Element haben:

<span>Original text</span> 

Wenn Sie Ihre erste Lösung verwenden:

var my_text = document.createTextNode('Hello!'); 
span.appendChild(my_text); 

dann wird es enden mit:

<span>Original textHello!</span> 

weil Sie hängten Ihre textNode.

Sie sollten also die zweite Lösung verwenden.