복제 된 요소는 다음 코드는 지정된 요소를 복제 후에 삽입해야

Question

을 표시되지 않습니다 :

function cloneMore(element) { 
    var newElement = element.cloneNode(true); 
    element.parentNode.insertBefore(newElement, element.nextSibling); 
} 
var addChoice = document.getElementById("add-choice") 
addChoice.onclick = (function(){cloneMore(document.getElementById("choices").lastChild);}) 

HTML은 다음과 같습니다

예외는 throw되지 않고, 모든 것이 실행되지만

<ul id="choices"> 
    <!-- form elements --> 
</ul> 
<p><a id="add-choice">Add another choice</a></p> 

I 새로운 요소를 볼 수 없습니다. 왜?

Answer 1

lastChild은 요소뿐만 아니라 모든 노드 유형을 선택합니다. 따라서 TextNode \n을 복제하려고합니다.

원하는 것은 lastElementChild입니다. 그것도 복제 경우

function cloneMore(element) { 
 
    var newElement = element.cloneNode(true); 
 
    element.parentNode.insertBefore(newElement, element.nextSibling); 
 
} 
 
var addChoice = document.getElementById("add-choice") 
 
addChoice.onclick = function() { 
 
    var choices = document.getElementById("choices"); 
 
    cloneMore(choices.lastElementChild); // only Elements 
 
    console.log('lastChild type : ', choices.lastChild.nodeName); 
 
}

<ul id="choices"> 
 
    <li> choice </li> 
 
</ul> 
 
<p><a href="#" id="add-choice">Add another choice</a></p>