Question

我想在结尾和列表的开头添加元素和相同的文字。我想使用appendChild和insertBefore。但是，如果我按照以下方式执行此操作，则只添加一个元素，这是脚本代码中的最后一个元素：

＆＃13;

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);

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

＆＃13;

Answer 1

您必须克隆要插入的元素。在您的代码中，您＆＃34;移动＆＃34; 元素从按钮到顶部，因为您处理的相同项目只能在html中存在一次。

所以只需添加一个.cloneNode(true)，克隆的项目可以位于顶部，另一个位于底部。

＆＃13;

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);

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

＆＃13;

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

1 个答案: