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

Answer 2

除非你是采用了棱角分明材料， <md-list-item>是一個無效的標簽。 對不起，我不知道你正試圖做什么，但如果你想以填補出頭的集合東西，你要使用角度。 看看NG-REPEAT指令。