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