由 element.appendChild(newNode) ,谈开去

当我们使用 JavaScript 编程时，经常需要修改 HTML 元素的结构，其中一个常用的方法就是将一个新的节点添加到现有节点的子节点列表中。这个操作可以通过 appendChild() 方法来完成。

1. element.appendChild(newNode) 的使用方法

1.1 参数

• newNode：要添加的新节点。可以是一个元素节点、文本节点、注释节点。

1.2 语法

parentElement.appendChild(newNode);

parentElement 是新添加节点的父节点，newNode 是要添加的新节点。

1.3 操作

添加一个新节点到父节点的末尾：

<div class="parent"></div>

var parentElement = document.querySelector('.parent');
var newNode = document.createElement('p');
newNode.textContent = 'Hello, World!';
parentElement.appendChild(newNode);

这个例子会在 class 为 parent 的 div 元素的末尾添加一个新的 p 元素节点，该节点的文本内容为“Hello, World!”。

添加一个新节点到父节点的指定位置：

<div class="parent">
  <p>第一个段落。</p>
  <p>第二个段落。</p>
  <p>第三个段落。</p>
</div>

var parentElement = document.querySelector('.parent');
var newNode = document.createElement('p');
newNode.textContent = '新的段落。';
parentElement.insertBefore(newNode, parentElement.children[1]);

这个例子会在 class 为 parent 的 div 元素中第二个 p 元素的前面添加一个新的 p 元素节点，该节点的文本内容为“新的段落。”。

2. 总结

appendChild() 方法允许将一个新的节点添加到一个现有节点的子节点列表的末尾，同时也可以指定要插入的位置。这个操作可以通过 insertBefore() 方法来实现，只需要在调用 appendChild() 方法之前添加 insertBefore() 方法即可。