前言

在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的用法

JS——appendChild()和insertBefore()插入新节点区别相关推荐

C语言已排序链表插入新节点保持排序状态(附完整源码)
C语言已排序链表插入新节点保持排序状态 C语言已排序链表插入新节点保持排序状态完整源码(定义,实现,main函数测试) C语言已排序链表插入新节点保持排序状态完整源码(定义,实现,main函数测试) ...
java递归方法建立搜索二叉树，具备查找关键字，插入新节点功能
二叉排序树的定义: 二叉排序树满足以下三个性质(BST性质): <1>若它的左子树非空,则左子树上所有节点的值均小于根节点的值 <2>若它的右子树非空,则右子树上所有节点的值均 ...
链表问题18——向有序的环形单链表中插入新节点
题目一个环形链表从头节点开始的顺序为不降序的顺序,也就是如1->2->2->2->3->4这样的链表叫做不降序,同时由最后的节点指回头节点.给定这个环形单链表的头节点h ...
向有环的环形链表中插入新节点
题目: 一个环形单链表从头节点开始不降序,同时由最后的节点指向头节点.给定这样一个环形单链表的头节点head和一个整数num,请生成节点值为num的新节点,并插入到这个环形链表中,保证调整后的链表依然 ...
Coding Interview Guide -- 向有序的环形单链表中插入新节点
[题目] 一个环形单链表从头节点head开始不降序,同时由最后的节点指回头节点.给定这样一个环形单链表的头节点head和一个整数num,请生成节点值为num的新节点,并插入到这个环形链表中,保证调整后 ...
php js 对象追加元素,JS添加元素新节点
这次给大家带来JS添加元素新节点,JS添加元素新节点的注意事项有哪些,下面就是实战案例,一起来看一下. www.jb51.net - JS添加新节点的几种方法 1234567890 //首先找到Id为 ...
html用js添加兄弟节点,JS简单添加元素新节点的方法示例
本文实例讲述了JS简单添加元素新节点的方法.分享给大家供大家参考,具体如下: www.jb51.net - JS添加新节点的几种方法 1234567890 //首先找到Id为d的元素 var d=do ...
在单链表的第i个位置后插入一个节点（阿里+腾讯等面试题总结）
时间:2014.04.26 地点:基地 ------------------------- 一.题目题目是非常easy和基础,就是在单链表的第i个位置后插入一个节点.要求写代码,5分钟之内完毕.面腾 ...
链表从尾部增加新节点
void addNode(int data){Node* p = head;Node* newNode = new Node(data);//建立新结点while (p->next != NUL ...

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

文章目录

前言

appendChild(newchild)

insertBefore(newchild, refchild)

insertBefore() 补充

参考资料

JS——appendChild()和insertBefore()插入新节点区别相关推荐

最新文章

热门文章