在 div 上附加子节点答案

【问题标题】：Appending child nodes on a div在 div 上附加子节点
【发布时间】：2016-07-14 18:41:54
【问题描述】：

我正在尝试根据数组中的元素将项目添加到 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 中。

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

【问题讨论】：

<md-list-item> 不是有效的 html 标记。
什么是list.uuids？请显示所有相关代码。此外，带有一些标记的 JSFiddle 会很好。
@MarcB 至少现在不是，但自定义标签是实时标准的一部分。但必须用document.registerElement('md-list-item')注册；
@MarcB 它可能是一个类似于 Polymer 的库，与官方 Web 组件规范大致相似。
是一个 Angular js 组件@MarcB

标签： javascript jquery html

【解决方案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);
    }
}

【讨论】：

【解决方案2】：

除非您使用 Angular Material，否则<md-list-item> 是无效标签。抱歉，我不确定您要做什么，但如果您想用一些东西的集合填充某些东西并且您想使用 Angular。查看 NG-REPEAT 指令。

【讨论】：