JS——appendChild()和insertBefore()插入新节点区别_综合

文章目录

前言
appendChild(newchild)
insertBefore(newchild, refchild)
insertBefore() 补充
参考资料

前言

在html中，如果需要动态的插入数据标签(li、a等)，则需要使用到标题所示的appendChild()或insertBefore()来实现。

这两种方法都具有插入新元素至指定的容器中的功能，但他们却有很大的区别。

appendChild(newchild)

appendChild()的字面意思append和child，从起名中可以看出，插入元素的位置为末尾。

向当前节点的子节点列表的末尾 添加新的子节点。

比如当前有一个容器div，需要动态地向其中增加其他元素标签和内容。

<div style="border: 1px solid #000000;width: 100%;height: 500px;" id="content"><li>xiangjiao</li>
</div>

其视图如下所示（截取部分）：
在这里插入图片描述
此时，使用appendChild()向其中增加新的元素信息。

window.onload=function(){
    // 获取父容器节点var father = document.body.querySelector("#content");for (var i = 0; i < 5; i++) {
    // 创建子节点var li = document.createElement('li');// 增加class属性//li.className="";// 增加data-*属性li.dataset.name="name-xiangjiao";// 向指定元素中添加内容li.innerText="xiangjiao"+i;// 将该标签加载至容器中father.appendChild(li);}
}

执行后的视图如下所示：
在这里插入图片描述

insertBefore(newchild, refchild)

依旧还是使用上面的例子，将js部分修改为insertBefore()，查看差异。
需要注意一点

这里的insertBefore需要传递两个参数信息：

参数一表示插入的标签对象；
参数二表示参照点。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div style="border: 1px solid #000000;width: 100%;height: 500px;" id="content"><li id="li1">xiangjiao</li></div></body><script type="text/javascript">window.onload=function(){
      // 获取父容器节点var father = document.body.querySelector("#content");for (var i = 0; i < 5; i++) {
      // 创建子节点var li = document.createElement('li');// 增加class属性//li.className="";// 增加data-*属性li.dataset.name="name-xiangjiao";// 向指定元素中添加内容li.innerText="xiangjiao"+i;// 将该标签加载至容器中// father.appendChild(li);// 获取需要向那个标签之前插入var one = document.body.querySelector("#li1");father.insertBefore(li,one);}}</script>
</html>

在这里插入图片描述

insertBefore() 补充

有人会问：

需要设置插入的参考点位，岂不是需要手动去设定id？

其实，还有一个简单的方式实现，如下所示：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div style="border: 1px solid #000000;width: 100%;height: 500px;" id="content"><li id="li1">xiangjiao</li></div></body><script type="text/javascript">window.onload=function(){
      // 获取父容器节点var father = document.body.querySelector("#content");for (var i = 0; i < 5; i++) {
      // 创建子节点var li = document.createElement('li');// 增加class属性//li.className="";// 增加data-*属性li.dataset.name="name-xiangjiao";// 向指定元素中添加内容li.innerText="xiangjiao"+i;// 将该标签加载至容器中// father.appendChild(li);// 获取需要向那个标签之前插入//var one = document.body.querySelector("#li1");//father.insertBefore(li,one);father.insertBefore(li,father.firstChild);}}</script>
</html>

将之前：

var one = document.body.querySelector("#li1");
father.insertBefore(li,one);

更换为：

father.insertBefore(li,father.firstChild);

则能实现从容器的第一个标签，自动向前插入数据。

参考资料

JS appendChild()和insertBefore()方法：插入新节点

insertBefore的用法