insertBefore 및 appendChild를 사용하여 목록의 처음과 끝에 동일한 요소를 삽입하는 방법?

Question

요소을 동일한 텍스트과 함께 끝에 추가하고 목록의 맨 앞에 추가하고 싶습니다. appendChild 및 insertBefore을 사용하고 싶습니다.

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

당신은 삽입 할 요소를 복제해야 : 나는 방법을 다음에서이 작업을 수행한다면, 스크립트의 코드와 같이 마지막이 단 하나 개의 요소를 추가 . 코드에서 "이동" 버튼에서 맨 위로 요소가 있습니다. 이는 HTML에서 한 번만 존재할 수있는 동일한 항목을 다루기 때문입니다.

따라서 .cloneNode(true)을 추가하면 복제 된 항목이 맨 위에 있고 다른 항목은 맨 아래에있을 수 있습니다.

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>