javascript - 将具有类的现有div元素(及其基础元素)添加到div

我需要一个函数，它将用一个类（及其底层元素）添加一个现有div到一个使用循环的特定div。看起来是这样的：

<div class="left-col">
    <div class="list-row">
        <div class="list-row2">
            <span>Hello</span>
        </div>
    </div>
</div>

我需要循环遍历一个函数，该函数将生成或复制两次“list row”。

$(function() {
    var leftcol = document.getElementsByClassName('left-col');

    for (var i = 0; i < 2; i++) {
        var listrow = document.querySelector('.list-row');
        leftcol.appendChild(listrow[i]);
    }
})

应该是这样的：

<div class="left-col">
    <div class="list-row">
        <div class="list-row2">
            <span>Hello</span>
        </div>
    </div>
    <div class="list-row">
        <div class="list-row2">
            <span>Hello</span>
        </div>
    </div>
    <div class="list-row">
        <div class="list-row2">
            <span>Hello</span>
        </div>
    </div>
</div>

最佳答案

您可以使用cloneNode并将deep属性设置为true。这将克隆节点及其所有子节点。
例如：

function cloneNode(copies = 1) {
  for (let i = 0; i < copies; i++) {
    let leftcol = document.getElementsByClassName('left-col')[0];
    let nodeToClone = document.querySelector(".list-row");
    let clonedNode = nodeToClone.cloneNode(true);
    leftcol.appendChild(clonedNode);
  }
}

clone.addEventListener("click", function() {
  cloneNode();
});

<button id="clone" type="button">Clone Node</button>
<div class="left-col">
  <div class="list-row">Test</div>
</div>

如果要插入多个副本，可以将不同的值传递给cloneNode函数。