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

您必须克隆要插入的元素。在您的代码中，您是 "moving" 从按钮到顶部的元素，因为您处理的是同一项目，该项目只能在 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>

如何使用 insertBefore 和 appendChild 在列表的开头和结尾插入相同的元素？

How to insert the same element on beginning and on the end of the list with insertBefore and appendChild?

javascript

dom

appendchild