创建节点

格式如下:

新的标签(元素节点) = 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>

打印结果:

插入节点

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

方式 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,那么他将在节点最后插入一个节点。
};

删除节点

格式如下:

父节点.removeChild(子节点);

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

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

node1.parentNode.removeChild(node1);

复制节点(克隆节点)

格式如下:

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

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

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

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

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

插入元素–补充方法

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

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

el.before()  将内容插入到元素el之前

el.after()   将内容插入到el元素之后

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


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

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

位置:beforeBegin / afterBegin / beforeEnd / afterEnd
文档更新时间: 2021-11-12 09:44   作者:张老师