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);
    }
}

Answer 2

除非您使用Angular Material，否则<md-list-item>是无效标记。对不起，我不确定你要做什么，但是如果你想填充一些东西，你想要使用Angular。查看NG-REPEAT指令。

在div上追加子节点

2 个答案: