2016-07-14 5 views
0

배열의 요소를 기반으로 div 요소에 항목을 추가하려고합니다. 내가 추가하려고하는 요소가 이미 페이지에 있습니다. 기본적으로 나는 그것의 새로운 버전을 만들고 div에 추가하려고합니다.div에 자식 노드 추가

코드는 더 자세히 설명하는 데 도움이 될 수 있습니다.

자바 스크립트 :

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에.

어디에서 오류를 해결할 수 있습니까?

+1

''은 유효한 html 태그가 아닙니다. –

+1

'list.uuids '란 무엇입니까? 관련 코드를 모두 표시하십시오. 또한, 일부 마크 업과 함께 JSFiddle 좋은 것입니다. –

+1

@MarcB 적어도 지금은 아니지만 사용자 정의 태그는 라이브 표준의 일부입니다. 그러나'document.registerElement ('md-list-item')';에 등록되어야합니다. –

답변

2

시험해보세요. 중요한 변경 사항은 노드를 반복해서 추가하는 대신 복제하는 것입니다. (한 노드에만 부모가있을 수 있으므로 복사 대신 이동하게됩니다.)

또 다른 변경 사항은 .html 대신 .text을 사용하는 것입니다. 텍스트를 다루는 경우 일반적으로 훨씬 좋습니다. (중요한 것은 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); 
    } 
} 
+0

물론입니다! .clone() 함수! 어리석은 나를 : P –

-1

당신이 각도 재료를 사용하지 않는 한, <md-list-item> 잘못된 태그입니다. 죄송합니다, 당신이 무엇을 시도하고 있는지 확실하지 않지만, 당신이 뭔가를 수집하고 각도를 사용하고 싶다면 뭔가를 채우기를 원한다면. NG-REPEAT 지시문을 확인하십시오.