Cloned Element nicht

Question

Der folgende Code angezeigt sollte das angegebene Element klonen und es nach dem Einfügen:

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

Die html sieht wie folgt aus:

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

keine Ausnahme ausgelöst und alles führt aber ich kann das neue Element nicht sehen. Warum?

Answer 1

lastChild wählt alle Knotentypen, nicht nur Elemente. Sie klonen wahrscheinlich einen TextNode \n.

Ich denke, dass was Sie wollen, ist 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>