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
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...
随机推荐
- 王立平--怎么查看Unity的版本号
1.打开Unity,Help->About Unity 2.版本
- UVa 12683 Odd and Even Zeroes(数论+数字DP)
意甲冠军: 要求 小于或等于n号码 (0<=n <= 1e18)尾数的数的阶乘0数为偶数 思考:当然不是暴力,因此,从数论.尾数0数为偶数,然后,它将使N阶乘5电源是偶数.(二指数肯定少5 ...
- Atitit. 拉开拉链zip文件 最佳实践实施 java c# .net php
Atitit. 拉开拉链zip文件 的实现最佳实践 java c# .net php 1. Jdk zip 跟apache ant zip 1 2. Apache Ant包进行ZIP文件压缩,upzi ...
- 基于最简单的FFmpeg的AVDevice抽样(屏幕录制)
=====================================================基于最简单的FFmpeg的AVDevice样品文章: 最简单的基于FFmpeg的AVDevic ...
- winform正在使用dsoframer迅速"Unable to display the inactive document.Click here to reacitive the document."
于winform正在使用dsoframer 1.3加载word档,但在axFramerControl1.Open("NPOI.docx");于axFramerControl1控制显 ...
- Windows PHone 8 获取硬件信息
/// <summary> /// 获取系统信息 /// </summary> private string GetDeviceInfo() { StringBuilder s ...
- SQL Server 2008 R2 安全性专题(一):安全原则
原文:SQL Server 2008 R2 安全性专题(一):安全原则 本系列主要专注与SQL Server 2005以后的DBMS,由于本人工作使用2008 R2,所以目前就针对2008 R2来做说 ...
- cocos2d-x3.0 解释具体的新的物理引擎setCategoryBitmask()、setContactTestBitmask()、setCollisionBitmask()
转载请注明出处:游戏开发实验室http://blog.csdn.net/u010019717/article/details/32942641 我在编写游戏的时候遇到了这个问题. 物理引擎其它的内容 ...
- 读改善c#代码157个建议:建议1~3
目录: 建议一:正确操作字符串 建议二:使用默认转型方法 建议三:区别对待强制转型和as 建议一.正确操作字符串 1.确保尽量少的装箱 static void Main(string[] args) ...
- 走向DBA[MSSQL篇] 针对大表 设计高效的存储过程【原理篇】 附最差性能sql语句进化过程客串
原文:走向DBA[MSSQL篇] 针对大表 设计高效的存储过程[原理篇] 附最差性能sql语句进化过程客串 测试的结果在此处 本篇详解一下原理 设计背景 由于历史原因,线上库环境数据量及其庞大,很多千 ...