Wie fügt man das gleiche Element am Anfang und am Ende der Liste mit insertBefore und appendChild ein?

Question

Ich möchte Elemente mit dem gleichen Text am Ende und am Anfang der Liste hinzufügen. Ich möchte appendChild und insertBefore verwenden. Aber, wenn ich dies tun Weg in wird wie folgt ergänzt nur ein Element, das die zuletzt im Code des Skripts ist:

var list = document.getElementsByTagName('ul')[0]; 
 
var firstElement = list.firstChild; 
 
var newElement = document.createElement('li'); 
 
var newText = document.createTextNode('new text'); 
 
newElement.appendChild(newText); 
 

 
list.appendChild(newElement); 
 
list.insertBefore(newElement, firstElement);

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul>

Answer 1

Sie haben das Element klonen Sie einfügen möchten . In Ihrem Code sind Sie "Verschieben" das Element von der Schaltfläche an die Spitze, weil Sie mit dem gleichen Element beschäftigen, die nur einmal in der HTML existieren kann.

Fügen Sie einfach einen .cloneNode(true) hinzu und ein geklonter Gegenstand kann oben und der andere unten sein.

var list = document.getElementsByTagName('ul')[0]; 
 
var firstElement = list.firstChild; 
 
var newElement = document.createElement('li'); 
 
var newText = document.createTextNode('new text'); 
 
newElement.appendChild(newText); 
 

 
list.appendChild(newElement); 
 
list.insertBefore(newElement.cloneNode(true), firstElement);

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul>