在div上附加子節點

我試圖根據數組中的元素將項添加到div元素中。我試圖添加的元素已經存在於頁面上。基本上我試圖創建一個新版本並將其添加到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。

你能幫我解決錯誤嗎？

來源

2016-07-14 Shanzid S. Bidhan

''不是有效的html標籤。 –

什麼是'list.uuids'？請顯示所有相關的代碼。另外，一個帶有標記的JSFiddle會很好。 –

@MarcB至少不是現在，但自定義標籤是現場標準的一部分。但必須註冊'document.registerElement（'md-list-item'）'; –

試試這個嗎？重要的變化是克隆節點，而不是一遍又一遍地追加它。（節點只能有一個父節點，所以它只會被移動而不是複製。）

我做的另一個改變是使用.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); 
    } 
}

來源

2016-07-14 18:49:52 smarx

ofcourse的數組！ .clone（）函數！愚蠢的我：P –

-1

除非你採用了棱角分明材料，<md-list-item>是無效的標籤。對不起，我不確定你正在嘗試做什麼，但如果你想用一些東西來填充某些東西，並且你想使用Angular。查看NG-REPEAT指令。

來源

2016-07-14 18:51:25

在div上附加子節點

回答

相關問題