Menu
The title is pretty clear: Is there any major difference between innerHTML and createTextNode (used with Append) to fill a span with text?
719
The use of innerHTML creates a potential security risk for your website. Malicious users can use cross-site scripting (XSS) to add malicious client-side scripts that steal private user information stored in session cookies. You can read the MDN documentation on innerHTML .
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.
The Differences Between The innerHTML property returns: The text content of the element, including all spacing and inner HTML tags. The innerText property returns: Just the text content of the element and all its children, without CSS hidden text spacing and tags, except <script> and <style> elements.
It then adds them to the DOM separately in a manner that causes their execution. .html() implicitly causes a few operations (script handling being one) whereas writing to innerHTML simply causes the innerHTML to change, but very little is done with that HTML.
innerText is very similar to textContent, however, there are important differences between them! Put simply, innerText is aware of the rendered appearance of text, while textContent is not. Here’s what innerHTML, innerText, and textContent return: getValue.innerHTML This element is <strong>strong</strong> and has some super fun <code>code</code>!
As mentioned in the innerHTML tutorial, you should use it only when the data comes from a trusted source like a database. If you set the contents that you have no control over to the innerHTML, the malicious code may be injected and executed. Assuming that you have a list of elements and you need in each iteration:
let div = document .querySelector ( '.container' ); let p = document .createElement ( 'p' ); p.textContent = 'JS DOM' ; div.appendChild (p); You can also manipulate an element’s HTML directly using innerHTML like this: let div = document .querySelector ( '.container' ); div.innerHTML += '<p>JS DOM</p>';
Even though the innerText property is said to've been standardised since 2016, it exhibits differences between browsers: Mozilla ignores U+200E and U+200F characters ("lrm" and "rlm") in innerText, while Chrome does not. Firefox reports 3 and 2, Chrome reports 3 and 3.
Of course. createTextNode will escape any strings and show them as they are, while innerHTML could render html-like strings into a DOM. If you don't want that (unless you are sure the text contains no unescaped tags, e.g. when assigning a literal directly), you can use textContent (or innerText for IE).
Yet I'd recommend createTextNode, because all browsers support it equally without any quirks.
85
Doing some research online, here's what I've found. This should cover it at a high level:
elem.createTextNode(text) and elem.textContent = text do the exact same thing (src: https://javascript.info/task/createtextnode-vs-innerhtml)
While textContent returns the full text contained in a node, innerText returns only the visible text contained in the node. (src: Difference between textContent vs innerText)
44
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
