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,可是我没找到相关的文章,希望以后会有机会解开这个问题。
通过这个问题让我认识到自己是多么无知,确实该停下脚步,回头拾遗了。

js拾遗:appendChild 添加移动节点的更多相关文章
- js 面向对象 动态添加标签
有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- JS & JQuery 动态添加 select option
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
- js改变或添加className
js改变或添加className <style type="text/css"> .newDiv { font-weight: bold; } </style&g ...
- 【js】appendChild
appendChild主要是用来追加节点插入到最后:循环的时候由于不停的搬家导致length在改变. 使用for循环 <!Doctype html> <html xmlns= ...
- js/jq 动态添加的元素不能触发绑定事件解决方案
<!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...
- js实现动态添加事件
js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...
- js 表格操作----添加删除
js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...
- JavaScript(appendChild添加节点)
首先,我们有一个编辑器,有一个简单的HTML页面,页面的级别分别 --> html -->head[title,meta,script,link] -- body,然后再新建一个inde ...
- JS实现动态添加和删除div
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...
随机推荐
- iOS 在下面 AOP 程序
iOS 在下面 AOP 程序 概念 在软件业.AOP对于Aspect Oriented Programming缩写,手段:面向方面的编程.它是一种函数式编程张燕生风扇类型.通过这样一个技术方案功能的预 ...
- 【Android小应用】强迫症头像生成器
近期一段时间在微信朋友圈,在头像的右上角添加一个红底白字的数字,让非常多有强迫症的同学点个不停,深深佩服发明这样的头像的姑娘,太机智了.但它不能自己定义,这是硬伤.... 这是朋友圈里的效果图: 这个 ...
- 巧妙设备MTU的大小,轻松提网速
MTU是什么? "MTU=最大传输单元 单位:字节" 我们在使用互联网时进行的各种网络操作,都是通过一个又一个"数据包"传输来实现的.而MTU指定了网络中可数据 ...
- 进口fbx角色动画read-only解
原文链接:http://answers.unity3d.com/questions/8172/how-to-add-new-curves-or-animation-events-to-an-im.ht ...
- 手把手教你如何加入到github的开源世界! (转)
我曾经一直想加入到开源项目中,但是因为没有人指导流程,网上看了很多,基本都是说了个大概,如果你也是一个初出茅庐的人,那么,我将以自己提交的一次开源代码为例,教会你步入开源的世界. 1,首先登陆到htt ...
- cocos2dx 使得单麻将(三)
cocos2dx 使得单麻将(三) 麻将逻辑4.得到手牌数据 我们已经保存了一个一维数组, 类似于一个表格,统计出全部牌相应的数量, 但我们如何得到当前手中是什么牌呢 //扑克转换 BYTE Swit ...
- Android.mk中的经常使用语法
Android.mk编译文件是用来向Android NDK描写叙述你的C,C++源码文件的, 今天查了一些经常使用的的语法. 一 概述: 一个Android.mk文件用来向编译系统描写叙述你的源码. ...
- [INS-20802] Oracle Database Configuration Assistant 失败
1.错误原因 [INS-20802] Oracle Database Configuration Assistant 失败 2.错误原因 3.解决方案 版权声明:本文博主原创文章.博客,未经同意 ...
- CSS截取字符串,额外的文本显示以省略号
最近的诀窍css还有这么叼炸天的侧~~~ 善待似论坛页面,头像70px,但username不限啊,English中国能够.你说如果他采取"我的名字是这么长啊.你该怎么办呢".那老和 ...
- cocos2d-x3.0 lua学习(一个)
最近开始学习Lua这里记录下一个写简单Lua代码,但我在写Lua代码.自己主动的代码提示的一些问题,谁希望提供下很好的解决方案,编辑我用SubLime Text2 test.lua.这里创建一个场景, ...