Append each element to each div

Question

I have an array with 2 elements, and I want to append each element to each div.

let numbers = ['1', '2'];
var appendDiv = document.getElementsByClassName('append-div');

var addBtn = document.querySelector('.add-btn');
addBtn.addEventListener('click', function() {
    // Here goes the code
});

<div class="append-div"></div>
<div class="append-div"></div>

<button class="add-btn">Add to Div</button>

I have tried to do a `foreach` loop to the array, and inside it, a `for` loop to the divs, but it didn't worked. @TannerDolby — dududornelees, Jun 03 '21 at 04:41
Add that to your question and I'm happy to provide an answer. — Tanner Dolby, Jun 03 '21 at 04:42
Does this answer your question? [For loop for HTMLCollection elements](https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements) — Nandita Sharma, Jun 03 '21 at 04:43

score 1 · Answer 1 · answered Jun 03 '21 at 04:47

1

Maybe this is the output you are looking for.

let numbers = ['1', '2'];
var appendDiv = document.querySelectorAll('.append-div');

var addBtn = document.querySelector('.add-btn');
addBtn.addEventListener('click', function() {
    appendDiv.forEach((item,i) =>{
        if(i < numbers.length){
            item.innerText = numbers[i]
        }
    })
  console.log(appendDiv,"appendDiv")
});

answered Jun 03 '21 at 04:47

M.Hassan Nasir

851
2
13

Thank you so much! :) – dududornelees Jun 03 '21 at 04:53
No worries :) . Why didn't you select my answer were there any errors? – M.Hassan Nasir Jun 03 '21 at 04:54
1

Just because @TannerDelby explained more about the content, but it worked perfectly. – dududornelees Jun 03 '21 at 05:01
Ok no problem :) – M.Hassan Nasir Jun 03 '21 at 05:02

Tanner Dolby · Accepted Answer · 2021-06-03T05:13:23.117

You can use a for loop to iterate over the HTMLCollection appendDiv and string array numbers. Then assign each .append-div elements textContent with the values from your string array.

let numbers = ['1', '2'];
var appendDiv = document.getElementsByClassName('append-div');

var addBtn = document.querySelector('.add-btn');
addBtn.addEventListener('click', function() {
    for (var i = 0; i < appendDiv.length; i++) {
      appendDiv[i].textContent = numbers[i];
    }
});

<div class="append-div"></div>
<div class="append-div"></div>

<button class="add-btn">Add to Div</button>

Or use the more modern Array.prototype.forEach(). But keep in mind, getElementsByClassName returns a live HTMLCollection which doesn't have access to Array methods like forEach. Therefore, you must convert the HTMLCollection to an Array using the spread operator and brackets like [...HTMLCollection].

let numbers = ['1', '2'];
var appendDiv = [...document.getElementsByClassName('append-div')];

var addBtn = document.querySelector('.add-btn');
addBtn.addEventListener('click', function() {
    appendDiv.forEach((element, index) => {
      element.textContent = numbers[index];
    });
});

<div class="append-div"></div>
<div class="append-div"></div>

<button class="add-btn">Add to Div</button>

Your welcome! See my second example for a more modern example with `forEach` usage. Happy coding :) — Tanner Dolby, Jun 03 '21 at 04:56

Append each element to each div

2 Answers2