Добавление дочерних узлов на div

Question

Im пытается добавить элементы в элемент 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> является недействительным тег. Извините, я не уверен, что вы пытаетесь сделать, но если вы хотите заполнить что-то коллекцией вещей, и вы хотите использовать Angular. Проверьте директиву NG-REPEAT.