3. 节点增删改查

1. 创建节点

格式如下：

新的标签(元素节点) = document.createElement("标签名");

比如，如果我们想创建一个 li 标签，或者是创建一个不存在的 adbc 标签，可以这样做：

<script type="text/javascript">
    var a1 = document.createElement("li"); //创建一个li标签
    var a2 = document.createElement("adbc"); //创建一个不存在的标签

    console.log(a1);
    console.log(a2);

    console.log(typeof a1);
    console.log(typeof a2);
</script>

打印结果：

2. 插入节点

插入节点有两种方式，它们的含义是不同的。

方式 1：

父节点.appendChild(新的子节点);

解释：

• 将指定的 childNode 参数作为最后一个子节点添加到当前节点。
• 如果参数引用了 DOM 树上的现有节点，则节点将从当前位置分离，并附加到新位置。

方式 2：

父节点.insertBefore(新的子节点, 作为参考的子节点);

解释：

• 在参考节点前插入一个新的节点。
• 如果参考节点为 null，那么他将在父节点里面的最后插入一个子节点。
• 如果参数引用了 DOM 树上的现有节点，则节点将从当前位置分离，并附加到新位置。

btn.onclick = function() {
    box.appendChild(imgEl);
    // 同一个节点 只能 添加一次
    // box.appendChild(imgEl);
    // box.appendChild(pEl);
    // 使用方法：父节点.insertBefore(要插入的节点，参考节点)；
    box.insertBefore(pEl, imgEl);
    // 如果参考节点为null，那么他将在节点最后插入一个节点。
};

3. 删除节点

格式如下：

父节点.removeChild(子节点);

解释：用父节点删除子节点。必须要指定是删除哪个子节点。

如果我想删除自己这个节点，可以这么做：

node1.parentNode.removeChild(node1);

4. 复制节点（克隆节点）

格式如下：

要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。

要复制的节点.cloneNode(true);

括号里带不带参数，效果是不同的。解释如下：

• 不带参数/带参数 false：只复制节点本身，不复制子节点。

• 带参数 true：既复制节点本身，也复制其所有的子节点。

5. 插入元素–补充方法

el.prepend() 将内容插入到el元素第一个子节点之前  (第一个孩子位置)

el.append()  将内容插入到el元素最后一个子节点之后  (最后一个孩子位置)

el.before()  将内容插入到元素el之前   (上一个兄弟位置)

el.after()   将内容插入到el元素之后   (下一个兄弟位置)

上述方法均可接收 DOM/txt，不识别HTML字符串


以下方法支持 HTML字符串 的插入

el.insertAdjacentHTML(位置, HTML代码片段)

位置：beforeBegin / afterBegin / beforeEnd / afterEnd

beforeBegin: 上一个兄弟位置
afterBegin: 第一个孩子位置
beforeEnd: 最后一个孩子位置
afterEnd: 下一个兄弟位置