javascript - 在 div 上追加子节点

Question

我尝试根据数组中的元素将项目添加到 div 元素中。 我尝试添加的元素已存在于页面上。基本上我只是想创建它的新版本并将其添加到 div 中。

代码可能有助于进一步解释事情。

JavaScript:

function apply(list) {
    var item = $("#it_template").children("md-list-item").eq(0);
    for(var i = 0; i < list.uuids.length; i++){
        var uid = list.uuids[i];
        item.children("p").eq(0).html(uid);
        $("#items").append(item);
    }
}

HTML:

<div id="items">
</div>
<div style="display:none" id="it_template">
    <md-list-item md-ink-ripple class="list_item">
        <p></p>
    </md-list-item>
</div>

它似乎在某个地方有问题，因为每当我运行代码时，我只看到一个项目被添加到 div 中。

您能帮我看看错误在哪里吗？

Answer 1

试试这个？重要的变化是克隆节点，而不是尝试一遍又一遍地附加它。 (一个节点只能有一个父节点，因此它只会被移动而不是被复制。)

我所做的另一个更改是使用 .text 而不是 .html。如果您正在处理文本，这通常要好得多。 (重要的是，它降低了 XSS 漏洞的风险。)

function apply(list) {
    var item = $("#it_template").children("md-list-item").eq(0);
    for(var i = 0; i < list.uuids.length; i++) {
        var uid = list.uuids[i];

        var newItem = item.clone();
        newItem.children("p").eq(0).text(uid);
        $("#items").append(newItem);
    }
}