如何使用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>