2015-07-26 2 views
10

Quel est l'avantage de créer un TextNode et de l'ajouter à un élément HTML plutôt que de définir directement son textContent?TextNode ou textContent?

Disons que j'ai une durée.

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

Et je veux changer son texte. Quel est l'avantage d'utiliser:

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

sur

span.textContent = 'hello';

Répondre

12

Il est pas vraiment un avantage, mais de l'utilisation appropriée en fonction de la nécessité.

La différence fondamentale est que:

  • createTextNode() est une méthode et fonctionne comme son nom l'indique: il crée un élément ... alors vous devez faire quelque chose avec elle (comme dans votre exemple, où vous l'ajouter comme un enfant);
    il est si utile si vous voulez avoir un nouvel élément et le placer quelque part
  • textContent est une propriété que vous pouvez obtenir ou définir, avec une déclaration unique et rien d'autre;
    il est donc utile lorsque vous voulez seulement changer le contenu d'un élément déjà existant

Maintenant, dans le cas précis de votre question, vous avez dit que vous voulez changement le texte de la élément ...
Pour être plus clair que vous avez l'élément HTML suivant:

<span>Original text</span> 

Si vous utilisez votre première solution:

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

il se terminera par:

<span>Original textHello!</span> 

parce que vous ajouté votre textNode.

Vous devriez donc utiliser la deuxième solution.