JavaScript DOM 节点插入：appendChild、append、insertBefore

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
  </head>
  <body>
    <div id="test">ceshi</div>
    <script>
      var byId = document.getElementById('test');

      var sp1 = document.createElement('p');
      // 添加一个id属性,值为'newSpan'
      sp1.setAttribute('id', 'newSpan');
      // 创建一个文本节点
      var sp1_content = document.createTextNode('新的span元素的内容.');
      sp1.appendChild(sp1_content); // 将文本节点插入到span元素中
      // byId.appendChild(sp1)
      byId.append('<div>111</div>');
      var childTwo = document.createElement('span');
      childTwo.innerText = 'childTwo';
      byId.append(sp1, childTwo);

      var newChild = document.createElement('span');
      newChild.innerText = '33';
      // byId.insertBefore(newChild, sp1)
      byId.insertBefore(newChild, null);

      var childThree = document.createElement('span');
      childThree.innerText = 'childThree';
      // 等价于 appendChild
      byId.insertAdjacentElement('beforeend', childThree);
    </script>
  </body>
</html>

appendChild

• 将一个节点附加到指定父节点的子节点列表的末尾处。
• 如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。
• 返回值: 返回追加后的子节点 （aChild），除非 aChild 是一个文档片段（DocumentFragment），这种情况下将返回空文档片段（DocumentFragment）。

append / prepend

• 在 ParentNode 的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。 被插入的 DOMString 对象等价为 Text 节点。
• 与 Node.appendChild() 的差异：
  • ParentNode.append() 允许追加 DOMString 对象，而 Node.appendChild() 只接受 Node 对象。
  • ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 Node 对象。
  • ParentNode.append() 可以追加多个节点和字符串，而 Node.appendChild() 只能追加一个节点。

insertBefore

• Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。
• 如果给定的子节点是对文档中现有节点的引用，insertBefore() 会将其从当前位置移动到新位置（在将节点附加到其他节点之前，不需要从其父节点删除该节点）。
• 如果引用节点为 null，则将指定的节点添加到指定父节点的子节点列表的末尾。
• 语法：var insertedNode = parentNode.insertBefore(newNode, referenceNode);
  • insertedNode： 被插入节点(newNode)
  • parentNode： 新插入节点的父节点
  • newNode： 用于插入的节点
  • referenceNode： newNode 将要插在这个节点之前
• referenceNode 引用节点不是可选参数——你必须显式传入一个 Node 或者 null
• 返回值：函数返回被插入过的子节点；当 newNode 是 DocumentFragment 时，返回空 DocumentFragment。

insertAdjacentElement

• insertAdjacentElement() 方法将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。
• 语法 element.insertAdjacentHTML(position, element);
  • position: 一个 DOMString，表示插入内容相对于元素的位置，并且必须是以下字符串之一：
    • beforebegin：元素自身的前面。
    • afterbegin：插入元素内部的第一个子节点之前。
    • beforeend：插入元素内部的最后一个子节点之后。
    • afterend：元素自身的后面。
  • element: 要插入到树中的元素.