Как через скрипт добавить элемент?

Question

[aimkeks]

Вечер добрый, господа. Можете помочь разобраться с задачкой. Нужно в уже имеющуюся форму, в каждый .parent добавить новый элемент .child со значением взятым из массива. ID у элементов нет. Пытался делать через append( ), но возникли проблемы с добавлением значения. Если добавлять через цикл, то само собой в каждый .parent добавляется столько .child, сколько значений в массиве. Как можно сделать иначе?

html

<div class="box">
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
    <hr>
    <div class="parent">
        <div class="child">10</div>
        <div class="child">20</div>
        <div class="child">30</div>
    </div>
    <hr>
    <div class="parent">
        <div class="child">5</div>
        <div class="child">10</div>
        <div class="child">15</div>
    </div>
</div>

js

<script>
     let arr = [4, 40, 20];

      for(let i = 0; i < arr.length; i++) {
          $('.parent').append(
              '<div class="child">' + arr[i] + '</div>'
          );
      }
</script>

Итог должен получится такой:

result

<div class="box">
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <hr>
    <div class="parent">
        <div class="child">10</div>
        <div class="child">20</div>
        <div class="child">30</div>
        <div class="child">40</div>
    </div>
    <hr>
    <div class="parent">
        <div class="child">5</div>
        <div class="child">10</div>
        <div class="child">15</div>
        <div class="child">20</div>
    </div>
</div>

Заранее спасибо.

Answer 1

[0xD34F]

document.querySelectorAll('.parent').forEach((n, i) => {
  n.insertAdjacentHTML('beforeend', `<div class="child">${arr[i]}</div>`);
});

или

for (const [ i, n ] of document.querySelectorAll('.parent').entries()) {
  n.append(document.createElement('div'));
  n.lastChild.className = 'child';
  n.lastChild.innerText = arr[i];
}

или

arr.forEach(function(n, i) {
  const div = document.createElement('div');
  div.classList.add('child');
  div.textContent = n;
  this[i].appendChild(div);
}, document.getElementsByClassName('parent'));

или

$('.parent').append(i => `<div class="child">${arr[i]}</div>`);

Comments

[aimkeks]

То, что нужно! Спасибо, что помогли разобраться

[ForSureN1]

А есть разница между
n.insertAdjacentHTML('beforeend', elem)
и
n.before(elem)
?