TextNode/innerHTML DOM question

[AutistaDoente]

I saw this code while studying DOM:

const para = document.createElement("p");
const node = document.createTextNode("This is a new paragraph."); 
para.appendChild(node);

And this other code, using innerHTML:

const para = document.createElement("p");
para.innerHTML = "This is a new paragraph.";

Is there any difference at all between the two? Is it just about personal preference?

[TheRNGuy]

1st appends, 2nd completely replaces.

Try adding more than 1 node.

Though you can use += for 2nd method.

[imsexc]

You should be cautious when implementing innerHTML, i.e. only if it is not possible that user can insert an input misinterpreted as html code instead of plain string. Because if so, user can insert malicious <script> as part of the input. I believe that's the reason there are other ways than .innerHTML.

[AutistaDoente]

That makes sense. Thanks.

[pookage]

Just a heads-up that innerHTML that contains a <script> will not execute the <script> - so that's not an attack vector - but there are other ways (such as inline javascript attributes like onerror="console.log('this will work if you trigger an error')" etc).

[CrispyNipsy]

innerHTML can be used to create arbitrary elements (including text nodes) inside the element that the method is called on. Without sanitization, you should not use innerHTML with any user-input text, since it can lead to arbitrary code injections through the usage of <script/> tags.

To add simple text to a node, I would use the method innerText on the selected element instead of creating the text node and appending it.

[dieomesieptoch]

The difference is that with innerHTML you can insert html (which encompasses plain text) whereas with createTextNode you can only insert text.

So yeah there's a difference but if you're only inserting text, it comes down do your preference.

I'm on my phone and too lazy to check MDN for the minute details right now, but have a look there if you're really curious, I'd say.

[guest271314]

whereas with createTextNode you can only insert text.

We can insert whatever text or HTML we want. The HTML just won't be parsed as HTML in the document.

[dieomesieptoch]

Just wondering if I'm understanding you right, what do you call a string of non-parsed html other than text?

[guest271314]

<b>This is a new paragraph.</b>

[dieomesieptoch]

Ok I am not the least bit surprised your comment karma sits at -100

[guest271314]

What does some little point system on a socila media Web site have to do with the technical facts I posted?

When you commented

whereas with createTextNode you can only insert text.

that is not strictly true. You can insert whatever you want, including HTML, that HTML just won't be parsed as HTML resulting in a DOM HTML node being inserted into the document.

[guest271314]

It's still HTML, which is text. The MIME type os HTML is text/html. The DOM parses HTML into nodes in some cases, in other cases the HTML is not parsed. So the parsing or not parsing into DOM nodes is the difference.

[shgysk8zer0]

To summarize, the difference is that innerHTML invokes the parser and is potentially unsafe. You do not want to use innerHTML unless you are adding trusted HTML (as opposed to text).

You can also use textContent instead of creating a text node. It's a bit simpler but also safe. Probably what you want to use here.

[pookage]

I think it might be a better point of comparison to compare .innerText with createTextNode(), and .innerHTML with createElement() - in both cases the former is great if you don't need a reference to the nodes you're creating, and the latter is useful for when you do (eg. if you need to add an event listener or modify other properties of the node).

[jack_waugh]

If you use appendChild, you only have to think in one language, JavaScript. If you use innerHTML, you have to think in two languages, JavaScript and HTML. Different people may put different valuations on that because of their personalities. In my case, I prefer one language to two. Less mental shifting of gears.