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

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]

Куда и что надо добавить:

const containers = document.querySelectorAll('.parent');
const tag = 'div';
const className = 'child';

Добавляем:

containers.forEach((n, i) => {
  n.insertAdjacentHTML(
    'beforeend',
    `<${tag} class="${className}">${arr[i]}</${tag}>`
  );
});

// или

for (const [ i, n ] of containers.entries()) {
  n.append(Object.assign(document.createElement(tag), {
    className,
    innerText: arr[i],
  }));
}

// или

for (let i = 0; i < containers.length; i++) {
  const el = document.createElement(tag);
  el.classList.add(className);
  el.textContent = arr[i];
  containers[i].insertAdjacentElement('beforeend', el);
}

// или

(function add(i, n = containers.item(i)) {
  if (n) {
    n.appendChild(document.createElement(tag));
    n.lastChild.setAttribute('class', className);
    n.lastChild.insertBefore(new Text(arr[i]), null);
    add(-~i);
  }
})(0);

Comments

[aimkeks]

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

[ForSureN1]

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