javascript - 将带有类(及其底层元素)的现有 div 元素添加到 div

Question

我需要一个函数，可以使用 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>

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