Javascript how to append an element to div with specific class

Question

I have some <div> s where I want to append some data to a child div with a specific class but I'm not sure how to do that:

Here is my JS code:

let items = document.querySelectorAll(".item");
items.forEach(function (item) {

  let textnode = document.createElement('p');
  textnode.innerHTML = 'some text';
  item.appendChild(textnode);
});

This actually works, bu it only appends the "textnode"-element to the existing elements.

When I try:

document.getElementsByClassName('left').appendChild(textnode);

It doesn't work.

Here is a JSFIDDLE

EDIT

I want to append the data to the .left element

Answer 1

getElementsByClassName returns multiple elements. Class names are not unique. Therefore you first need to select an element in that list.

 var textnode = document.createTextNode("Test"); var node = document.getElementsByClassName('left'); node[0].appendChild(textnode);

 <div class="left"></div>

Answer 2

It seems you want to append an element to .left descendant of item elements. If this is the case, you can use the querySelector instead of getElementsByClassName :

item.querySelector('.left').appendChild(textnode);

Note that above code calls the querySelector method as a member of item (instance ofHTMLDivElement interface).

Answer 3

getElementsByClassName returns the array of elements. So u need to use the index for that.

let x = document.getElementsByClassName('left')
x[0].appendChild(textnode)

This is working. I have updated the code in your fiddle. Please check out