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

Question

var line = "<p><strong>" + name + ": </strong>" + message.field_message_body.und[0].value + "</p>";
console.log(line);
console.log(document.getElementById("messages"));

document.getElementById("messages").appendChild(line);

messages exists and it returns

<div id=messages"></div>

Nothing appears to be empty, so I'm not sure why this is being thrown.

Does anyone have any idea why it might be throwing this error?

try `.appendChild(document.createTextnode(line));` instead of `.appendChild(line);` — dandavis, Sep 08 '15 at 00:05

score 16 · Accepted Answer · answered Sep 08 '15 at 00:00

16

The line variable you're passing isn't a Node, it's a String. Try first using

var line = document.createElement("p");
line.innerHTML = "<strong>" + name + ": </strong>" + message.field_message_body.und[0].value;
document.getElementById("messages").appendChild(line);

answered Sep 08 '15 at 00:00

RK.

867
2
10
19

Yep, discovered that at about the time you posted. This works. I'll award you the point when it lets me. – Steven Matthews Sep 08 '15 at 00:03
also make sure that `name` and `message.field_message_body.und[0].value` are sanitized (i.e. make sure it's not vulnerable to XSS) – petrkotek Sep 08 '15 at 00:13

Beroza Paul · Answer 2 · 2015-09-08T00:17:59.740

1

How about this:

var line = "<p><strong>" + name + ": </strong>" + message.field_message_body.und[0].value + "</p>";
var msgHTML = document.getElementById("messages").innerHTML;
document.getElementById("messages").innerHTML = msgHTML + line;

edited Sep 08 '15 at 00:17

answered Sep 08 '15 at 00:10

Beroza Paul

2,047
1
16
16

I do not recommend this. this will remove state and event listeners. – Kurkula Nov 20 '17 at 21:13

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

2 Answers2

Linked