js插入节点appendChild和insertBefore

简介:
首先 从定义来理解 这两个方法: 
appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild) 
insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild) 
相同之处:插入子节点 
不同之处:实现原理方法不同。 
     appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。 
     insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。 

来看个这个简单的实例:在id为box-con 的末尾添加一个子节点div 



本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1903313,如需转载请自行联系原作者

相关文章
|
4月前
|
JavaScript
js添加 删除 替换 插入节点所用的方法
js添加 删除 替换 插入节点所用的方法
20 0
|
5月前
|
JavaScript 前端开发
js中添加 删除 替换 插入节点所用的方法
js中添加 删除 替换 插入节点所用的方法
38 0
|
4月前
|
JavaScript
js中添加 删除 替换 插入节点所用的方法
js中添加 删除 替换 插入节点所用的方法
18 0
|
5月前
|
JavaScript
js添加 删除 替换 插入节点所用的方法。js常用的几种事件。
js添加 删除 替换 插入节点所用的方法。js常用的几种事件。
37 0
|
API
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
115 0
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
211 0
|
API
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
106 0
|
API
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node
430 0
|
JavaScript
js拾遗:appendChild 添加移动节点
原文:js拾遗:appendChild 添加移动节点 写js一年多了,一直以为自己很牛逼,开始写各种博文分享,昨天写了一篇《浅谈 IE下innerHTML导致的问题》在看了下面的评论,我才发现自己是多么无知。
907 0