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)を追加するだけで、複製されたアイテムは上部に、もう1つは下部に置くことができます。

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>