Javascript does not recognize node when I use append child to append a string

Question

I am playing around with DOM commands to get a better understanding of them. However, I am getting an error message when I try to append a string of HTML to a child of an element I've selected. I get an error message that says my div3 variable is not a node. However, when I console.log(div3) it is listed as a node in my console log. What am I doing wrong?

var div3 = document.getElementById('div3');
div3.innerHTML = "Test String";
console.log(div3);

div3.appendChild("<h2>myH2 tag</h2>")

<div id="div3"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, natus.</p></div>

It's not about div3, it's about the fact that you're passing a string, as opposed to a node to appendChild() — user5734311
– user5734311, Commented Jul 23, 2020 at 13:58
<h2>myH2 tag</h2> is not a Node, it's a string/text. You can read up on the topic here — Marc Hjorth
– Marc Hjorth, Commented Jul 23, 2020 at 13:58
@MarcHjorth Please don't link to w3schools; use official docs: developer.mozilla.org/en-US/docs/Web/API/Node/appendChild — user5734311
– user5734311, Commented Jul 23, 2020 at 13:59
@ChrisG Personally, I believe the W3 docs are easier to understand for newcomers than the official docs - especially this one regarding appending a child. But I will keep that in mind, thanks! — Marc Hjorth
– Marc Hjorth, Commented Jul 23, 2020 at 14:01

Uwe Keim · Accepted Answer · 2020-07-23 14:01:45Z

5

If you're getting the same error message as me, it is the following:

VM189:1 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

This is because "<h2>myH2 tag</h2>" is not a node.

If you want to append a tag like that you'll have to create a node from scratch, and then append it:

// your code:
var div3 = document.getElementById('div3');
div3.innerHTML = "Test String";

// new:
const newNode = document.createElement('h2')

newNode.innerText = "myH2 tag"

div3.appendChild(newNode)

That should do it.

edited Jul 23, 2020 at 14:01

Uwe Keim

40.9k61 gold badges193 silver badges309 bronze badges

answered Jul 23, 2020 at 14:00

Sebastian

1,56515 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Geovani Santos · Accepted Answer · 2020-07-23 14:05:37Z

1

You need convert div3 variable for DomElement use this: div3 = new DOMParser().parseFromString(div3, "text/xml"); before call appendChild()

answered Jul 23, 2020 at 14:05

Geovani Santos

3911 silver badge7 bronze badges

Comments

Dharman · Accepted Answer · 2020-07-23 14:13:02Z

1

The reason is that youo're trying to pass a string to the appendChild function - it needs to be of Node Type. You could pass the tags inside of innerHTML instead along with the content but the snippet I added gives you an idea of how to go abut it.

MDN link for appendChild - MDN is our friend: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

let parent = document.querySelector('.my-body');
let header = document.createElement('h2');
// insert content into the header we created above
header.innerHTML = 'This is some heading text';
// append header to the container
parent.appendChild(header);

<div class="my-body"></div>

edited Jul 23, 2020 at 14:13

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Jul 23, 2020 at 14:07

Kurtis Rogers

595 bronze badges

Collectives™ on Stack Overflow

Javascript does not recognize node when I use append child to append a string

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related