@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>


Заранее спасибо.
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
document.querySelectorAll('.parent').forEach((n, i) => {
  n.insertAdjacentHTML('beforeend', `<div class="child">${arr[i]}</div>`);
});

или

$('.parent').append(i => `<div class="child">${arr[i]}</div>`);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы