js插入节点appendChild和insertBefore

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

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



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

相关文章
|
7月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
77 2
|
7月前
|
JavaScript 前端开发
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
|
7月前
|
JavaScript
Turndown 源码分析:五、节点相关`root-node.js`和`node.js`
Turndown 源码分析:五、节点相关`root-node.js`和`node.js`
78 0
|
7月前
|
JavaScript
js添加 删除 替换 插入节点所用的方法
js添加 删除 替换 插入节点所用的方法
39 0
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
25 5
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
31 2
|
7月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
|
5月前
|
JavaScript
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
157 0
|
6月前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
110 0
|
6月前
|
JavaScript 前端开发
JS中访问节点和创建节点的方法都有什么?
JS中访问节点和创建节点的方法都有什么?
41 0