item.appendChild is not a function

Question

I know this is a very common error but I have read and read and can't figure it out why. It's probably something very easy but I can't solve it by myself.

var item = document.createElement("div").className = "item";
var img = document.createElement("img").src = imgpath + $(this).attr("href");;
item.appendChild(img);

Any help is appreciated!

EDIT:

var item = document.createElement("div");
item.className = "item";
var img = document.createElement("img");
img.src = imgpath + $(this).attr("href");
item.append(img);

This throws the same error.

Answer 1

In your case you are creating a div and assigns it a class name, and the same value(class name) is assigned to the item variable. So it is a string value which does not have the appendChild method.

var item = document.createElement("div");
item.className = "item";
var img = document.createElement("img");
img.src = imgpath + $(this).attr("href");;
item.appendChild(img);

The same concept applies to img also

Answer 2

Problem is here

document.createElement("div").className = "item"

it will return a string which won't have a method called appendChild on it. You don't have any reference to the created div.

You should be doing like this

var item = document.createElement("div");
item.className = "item";

var img = document.createElement("img");
img.src = imgpath + $(this).attr("href");
item.appendChild(img);