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';
textContents is all text contained by an element and all its children that are for formatting purposes only. innerText returns all text contained by an element and all its child elements. innerHtml returns all text, including html tags, that is contained by an element.
A text node encapsulates XML character content. A text node can have zero or one parent. The content of a text node can be empty. However, unless the parent of a text node is empty, the content of the text node cannot be an empty string.
innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML. Moreover, using textContent can prevent XSS attacks.
HTML DOM Document createTextNode()Attributes are nodes. Texts are nodes. Some elements contain other nodes. Some elements contain text nodes. Some elements consain attribute nodes.
It 's not really matter of advantage but of proper usage depending on the need.
The fundamental difference is that:
createTextNode()
is a method and works just as its name says: it creates an element... then you must do something with it (like in your example, where you append it as a child);textContent
is a property you may get or set, with a unique statement and nothing else;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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With