0

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

ST80
  • 3,565
  • 16
  • 64
  • 124
  • `document.getElementsByClassName` Notice the `s` at `elements`. You are getting a list (a `NodeList` to be exact). Loop over the elements inside – Seblor Sep 19 '18 at 09:22
  • 1
    "it only appends the "textnode"-element to the existing elements" — Well, yes. That's what I would expect. What did you want? To have something which monitored the DOM to look for new elements which are members of that class and then add the paragraph when they appeared? – Quentin Sep 19 '18 at 09:23
  • Re edit: *I want to append the data to the .left element* — So do it the same way as you do in the working code! – Quentin Sep 19 '18 at 09:24
  • Possible duplicate: https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method – Quentin Sep 19 '18 at 09:25

3 Answers3

0

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>
Mark Baijens
  • 13,028
  • 11
  • 47
  • 73
0

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 of HTMLDivElement interface).

Ram
  • 143,282
  • 16
  • 168
  • 197
-1

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

Kiran Tangellapalli
  • 162
  • 1
  • 1
  • 12
  • "the arrays of elements" — Node lists are not arrays. – Quentin Sep 19 '18 at 09:25
  • And this is a FAQ, so if this is the answer it should be closed as a [duplicate](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) not given another version of this answer. – Quentin Sep 19 '18 at 09:26
  • getElementsByClassName is pure JS method returns an array of all elements in the document with the specified class name, as a NodeList object. – Kiran Tangellapalli Sep 19 '18 at 09:27
  • It is DOM, not "pure JS" (you won't find it in the ECMAScript spec) and it does not return an array. It returns a Node List. Node Lists are not arrays. – Quentin Sep 19 '18 at 09:28