CODEWITHSUNDEEP
javascript
jskidd3
jskidd3

Reputation: 4783

Child element is not being added to parent (parent.appendChild)

I'm pretty sure I'm going to kick myself hard (very hard) when I see an answer to this but when I do console.log(markerDiv) the console just outputs the img element. What am I doing wrong?

Edited as answers suggest:

var dynamic = document.createElement("img");
dynamic.src = "images/dynamic.png";
dynamic.setAttribute("id", "img-" + markerData[data].registration);
var markerDiv = document.createElement("div");
markerDiv.appendChild(dynamic);

console.log(markerDiv);

Result of console.log:

enter image description here

Thanks

Upvotes: 0

Views: 360

Answers (2)

c.P.u1
c.P.u1

Reputation: 17094

You are not appending your newly created div to the DOM. Node.appendChild returns the newly created node(HTMLImageElement in your case).

var div = document.createElement("div");
div.appendChild(dynamic);
document.appendChild(div);

Upvotes: 2

Alnitak
Alnitak

Reputation: 339985

.appendChild returns a reference to the child, not the parent, so you can't chain it like that:

var markerDiv = document.createElement("div").appendChild(dynamic);
// markerDiv === dynamic

Break the chain, and it'll work:

var markerDiv = document.createElement("div");
markerDiv.appendChild(dynamic);

Upvotes: 3

Related Questions