javascriptdomcreatetextnode

TextNode or textContent?


What's the advantage of creating a TextNode and appending it to an HTML element over setting directly its textContent?

Let's say I have a span.

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

And I want to change its text. What's the advantage of using :

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

over

span.textContent = 'hello';


Solution

  • It 's not really matter of advantage but of proper usage depending on the need.

    The fundamental difference is that:

    Now in the precise case of your question, you said you want to change the text of the element...
    To be more clear say you have the following HTML element:

    <span>Original text</span>
    

    If you're using your first solution:

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

    then it will end with:

    <span>Original textHello!</span>
    

    because you appended your textNode.

    So you should use the second solution.