js拾遗:appendChild 添加移动节点

简介: 原文:js拾遗:appendChild 添加移动节点写js一年多了,一直以为自己很牛逼,开始写各种博文分享,昨天写了一篇《浅谈 IE下innerHTML导致的问题》在看了下面的评论,我才发现自己是多么无知。
原文: js拾遗:appendChild 添加移动节点

写js一年多了,一直以为自己很牛逼,开始写各种博文分享,昨天写了一篇《浅谈 IE下innerHTML导致的问题》在看了下面的评论,我才发现自己是多么无知。
于是我回头翻阅了下 MDN,Node.appendChild 里面一开始就明确说了,“如果该节点已经存在,则从当前父节点中删除,然后添加到新的父节点。”
简单来说就是移动当前节点的意思,所以昨天的代码里去掉 obox.innerHTML = ""; 即可全兼容。

来看个常见的例子:

var p = document.createElement("p");
document.body.appendChild(p);

这个是最常见的用法,创建 p 节点,添加到 body 的末尾。

var p1 = document.getElementById("p1");
document.body.appendChild(p1);

那这个代码的意思就是选择ID为 p1 的节点,移动到 body 的末尾。

简单说,就是把节点放到指定父节点的末尾,不论是新建的还是选取到的。

不过话说回来,innerHTML 在IE下确实存在bug,可是我没找到相关的文章,希望以后会有机会解开这个问题。

通过这个问题让我认识到自己是多么无知,确实该停下脚步,回头拾遗了。

这场战争结束后我就回老家结婚

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