将具有类（及其基础元素）的现有 div 元素添加到 div答案

【问题标题】：Add an existing div element with classes (along with its underlying elements) to a div将具有类（及其基础元素）的现有 div 元素添加到 div
【发布时间】：2019-08-29 04:22:40
【问题描述】：

我需要一个函数，它可以使用 for 循环将带有类的现有 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>

【问题讨论】：

标签： javascript html loops

【解决方案1】：

您可以尝试以下方法：

$(function() {
    var leftcol = document.querySelector('.left-col');
    for (let i = 0; i < 2; i++) {
      var listrow = document.querySelector('.list-row').cloneNode();
      listrow.textContent = i + 1 + listrow.textContent;
      leftcol.appendChild(listrow);
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-col">
    <div class="list-row">0</div>
</div>

【讨论】：

这也很有用。谢谢。

【解决方案2】：

您可以使用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 函数。

【讨论】：

【解决方案3】：

您可以使用jQuery 的.clone() 方法将一个元素的全部内容复制到另一个元素。传递给clone 函数的布尔参数确定是否必须复制与克隆元素关联的事件。 true 表示必须复制与该 div 关联的所有事件。

$(function() {
$('.list-row').each(function(){
$(".left-col").append($(this).clone(true));
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="left-col">
    <div class="list-row"><h1>This is original row</h1></div>
</div>

【讨论】：

【解决方案4】：

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

    for (var i = 0; i < 2; i++) {
        leftcol.appendChild(listrow.clone(true));
    }
})

【讨论】：