如何在javascript中使用Loop复制HTML元素

Question

我正在尝试使用javascript for循环复制html元素，循环运行正常，但不会在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孩子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

尝试使用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>

Answer 3

您还可以使用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">