Как реплицировать элементы HTML с помощью Loop в JavaScript

Question

Я пытаюсь реплицировать html-элементы с помощью javascript для цикла, цикл работает нормально, но не создает новые элементы в html.

Когда я печатаю отца в консоли, продолжается только с 1 элементом.

var child = document.getElementById('child');
var father = document.getElementById('father');

for (let i = 0; i < 4; i++) {
  father.appendChild(child)
}

<div id="father">
  <div id="child" class="row mt-5">
    <div class="col-sm-8">
      <h2 class="news" id="">News</h2>
    </div>
  </div>
</div>

Я хочу напечатать div child 5 раз в браузере

Answer 1

Использование .cloneNode

var child = document.getElementById('child');
var father = document.getElementById('father');

for (let i = 0; i < 4; i++) {
  father.appendChild(child.cloneNode(true))
}

<div id="father">
  <div id="child" class="row mt-5">
    <div class="col-sm-8">
      <h2 class="news" id="">News</h2>
    </div>
  </div>
</div>

Answer 2

Вы также можете использовать тег template для клонирования, тег шаблона - это механизм для хранения контента на стороне клиента, который не должен отображаться при загрузке страницы, но может впоследствии быть создан в процессе выполнения с использованием JavaScript.

var father = document.getElementById('father');
var temp = document.getElementsByTagName("template")[0];
  
for (let i = 0; i < 4; i++) {
   father.appendChild(temp.content.cloneNode(true))
}

  <template>
  
    <div class="row mt-5">
        <div class="col-sm-8">
            <h2 class="news" id="">News</h2>
        </div>
    </div>

  </template>
  
  <div id="father">

Answer 3

Попробуйте использовать cloneNode:

var child = document.getElementById('child');
var father = document.getElementById('father');

for (let i = 0; i < 4; i++) {
    let childCopy = child.cloneNode(true);
    father.appendChild(childCopy);
}

<div id="father">
    <div id="child" class="row mt-5">
        <div class="col-sm-8">
            <h2 class="news" id="">News</h2>
        </div>
    </div>
</div>