From my understanding, document.querySelector returns a Node object. I can then call appendChild on this object.

I execute the following code to append a bunch of divs to my container div:

var container = document.querySelector('.container');
for (var i = 0; i < 400; i++) {
  var block = document.createElement('div');
  block.className = 'block';
  container.appendChild(block);
}

And end up with the following structure:

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  ...
  <div class="block"></div>
</div>

How can I loop through each element in my container div and add a new class to it using my existing container variable?

I have tried this:

...
container.childNodes[i].className = 'myClass';

It seems I need to access the Element object of the child Node, but I'm not sure how to do this.

From my understanding, document.querySelector returns a Node object. I can then call appendChild on this object.

I execute the following code to append a bunch of divs to my container div:

var container = document.querySelector('.container');
for (var i = 0; i < 400; i++) {
  var block = document.createElement('div');
  block.className = 'block';
  container.appendChild(block);
}

And end up with the following structure:

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  ...
  <div class="block"></div>
</div>

How can I loop through each element in my container div and add a new class to it using my existing container variable?

I have tried this:

...
container.childNodes[i].className = 'myClass';

It seems I need to access the Element object of the child Node, but I'm not sure how to do this.

• javascript
• dom

Share Improve this question Follow edited Nov 24, 2015 at 2:11 Felix Kling 818k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Nov 24, 2015 at 1:10 chipit24chipit24 6,9971111 gold badges5252 silver badges7575 bronze badges 9

• 1 That should work. What is i? Are all of the containers childnodes elements? Try children instead. – Bergi Commented Nov 24, 2015 at 1:15
• 2 difference between node and element – Barmar Commented Nov 24, 2015 at 1:19
• The nodes returned by querySelector are all elements, because you can't write a selector for non-element nodes. – Barmar Commented Nov 24, 2015 at 1:20
• 1 Why don't you add the class in the loop where you create the DIVs? – Barmar Commented Nov 24, 2015 at 1:21
• 1 @cornflakes24: I don't understand, isn't that log expected? What doesn't work? .childrenis a property of the Element subclass of Node – Bergi Commented Nov 24, 2015 at 1:38

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 0

Can you not just add it when you create the divs ?

var container = document.querySelector('.container');
for (var i = 0; i < 400; i++) {
  var block = document.createElement('div');
  block.className = 'block myClass';
  container.appendChild(block);
}

To add classes to the elements in the container variable, I used the following code:

container.children[i].className = 'myClass';

I had to use children instead of childNodes. You can see the context in which this code was used here: http://codepen.io/robkom/pen/RWmodz.