请你耐心看完以下的攻略：

初学js插入节点appendChild insertBefore使用方法

在 web 开发中，操作 DOM （文档对象模型）是必不可少的功能。DOM 提供了操作 HTML、XML 文档的接口，使得我们可以通过 JS 在 HTML 页面中进行各种动态操作，例如添加、删除、移动节点等。其中添加节点是常见的操作之一，本文将讲解常用的添加节点方法 appendChild 和 insertBefore。

appendChild() 方法

appendChild() 方法用于在节点的最后添加一个新的子节点。具体语法如下：

parentNode.appendChild(newNode);

其中 parentNode 是要添加子节点的节点对象，newNode 是要添加的子节点对象。以下示例将在一个 <ul> 列表的最后添加一条新的 <li> 项：

<ul id="list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

var list = document.querySelector("#list");  // 获取 <ul> 节点对象
var newItem = document.createElement("li");   // 创建新的 <li> 节点对象
newItem.textContent = "第四项";               // 设置新节点的文本内容
list.appendChild(newItem);                    // 将新节点添加到 <ul> 节点的最后

以上代码创建了一个新的 <li> 节点对象 newItem，并将其添加到了 <ul> 列表的最后，此时页面的 HTML 代码变为：

<ul id="list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
</ul>

insertBefore() 方法

insertBefore() 方法用于在节点的指定位置添加一个新的子节点。具体语法如下：

parentNode.insertBefore(newNode, referenceNode);

其中 parentNode 是要添加子节点的节点对象，newNode 是要添加的子节点对象，referenceNode 是要插入在其前面的参考节点对象。以下示例将在一个 <ul> 列表的第二项前面添加一条新的 <li> 项：

<ul id="list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

var list = document.querySelector("#list");  // 获取 <ul> 节点对象
var newItem = document.createElement("li");   // 创建新的 <li> 节点对象
newItem.textContent = "新的第二项";            // 设置新节点的文本内容
var refNode = list.children[1];               // 获取 <ul> 列表的第二项节点
list.insertBefore(newItem, refNode);           // 将新节点插入到第二项之前

以上代码创建了一个新的 <li> 节点对象 newItem，并将其插入到了 <ul> 列表的第二项之前，此时页面的 HTML 代码变为：

<ul id="list">
  <li>第一项</li>
  <li>新的第二项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

示例讲解

以上是 appendChild 和 insertBefore 方法的基本使用方法和语法，下面用两个例子来进一步讲解。

示例1：表格行添加

下面有一个包含表格的 HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>22</td>
    </tr>
    <tr>
      <td>王二</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

现在要在表格的第二行和第四行之间添加一行，包含姓名为“赵五”、性别为“女”、年龄为“23”的信息。使用 insertBefore 方法来实现：

var table = document.querySelector("#myTable"); // 获取 <table> 节点对象
var newRow = table.insertRow(3);                 // 在第四行的位置创建新行
var nameCell = newRow.insertCell(0);             // 创建新单元格，并设置单元格的内容
nameCell.textContent = "赵五";
var genderCell = newRow.insertCell(1);           // 创建新单元格，并设置单元格的内容
genderCell.textContent = "女";
var ageCell = newRow.insertCell(2);              // 创建新单元格，并设置单元格的内容
ageCell.textContent = 23;

上述代码用到了 table.insertRow() 和 insertCell() 方法来创建行和单元格。其中 table.insertRow(index) 方法可以在表格中的指定位置创建一个新的行，并返回对该行的引用；newRow.insertCell(index) 方法用于在指定行的指定位置创建一个新的单元格，并返回对该单元格的引用。

示例2：深度优先遍历

下面有一个 HTML 示例：

<div class="parent" id="level-1">
  <ul>
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3
      <ul>
        <li>subitem-1</li>
        <li>subitem-2</li>
      </ul>
    </li>
    <li>item-4</li>
  </ul>
  <div class="child" id="level-2">
    <p>段落1</p>
    <p>段落2</p>
  </div>
</div>

上面的 HTML 片段表示了一个简单的 DOM 树，其中包含两个层级的节点。现在要用深度优先遍历的方式遍历整棵树，输出节点的名称和 ID。代码如下：

// 递归函数
function dfs(node) {
  console.log(node.nodeName, node.id);  // 输出节点的名称和 ID
  if (node.hasChildNodes()) {           // 若当前节点有子节点，则递归遍历其子节点
    var childNodes = node.childNodes;
    for (var i = 0; i < childNodes.length; i++) {
      if (childNodes[i].nodeType === Node.ELEMENT_NODE) {  //排除文本节点
        dfs(childNodes[i]);
      }
    }
  }
}

// 调用函数，从根节点开始遍历
var root = document.documentElement;
dfs(root);

上述代码定义了一个 dfs 函数，用于深度优先遍历整棵树，并输出节点的名称和 ID。在函数中，若当前节点有子节点，则递归地遍历其子节点。使用到的方法有 node.nodeName （返回节点的名称）、node.nodeType （返回节点的类型，1 表示元素节点，3 表示文本节点）和 node.hasChildNodes() （判断节点是否含有子节点）。

以上就是关于 appendChild 和 insertBefore 方法的完整攻略，希望对您有所帮助！