原文: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 添加移动节点的更多相关文章

  1. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. JS & JQuery 动态添加 select option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

  3. js改变或添加className

    js改变或添加className <style type="text/css"> .newDiv { font-weight: bold; } </style&g ...

  4. 【js】appendChild

    appendChild主要是用来追加节点插入到最后:循环的时候由于不停的搬家导致length在改变.     使用for循环 <!Doctype html> <html xmlns= ...

  5. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  6. js实现动态添加事件

    js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...

  7. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  8. JavaScript(appendChild添加节点)

    首先,我们有一个编辑器,有一个简单的HTML页面,页面的级别分别 --> html  -->head[title,meta,script,link] -- body,然后再新建一个inde ...

  9. JS实现动态添加和删除div

    实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...

随机推荐

  1. mvc+webapi+dapper+ef codefirst项目搭建

    首先项目是mvc5+webapi2.0+orm数据处理(dapper)+ef动态创建数据库. 1.项目框架层次结构: mvc项目根据不同的业务和功能进行不同的区域划分[今后项目维护起来方便],mode ...

  2. jQuery 代码的层定位滑动动画效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 阿里2015回顾面试招收学历(获得成功offer)

    1. 引言 继上次"百度2015校园招聘面试题回顾录(成功拿到offer)"文章过后,大家都希望除了题目之外.最好能给出自己当时的回答情况,看看有没有什么回答技巧,这样更有參考价值 ...

  4. 无需Visual Studio,5容易的 - 分为报告

    总报告设计,例如RDLC.水晶报表等.,需要安装Visual Studio.由VS提供报表设计界面设计报告,由VS设计报告.NET非常方便开发者,.但对于非开发,安装4G一个VS.并且需要Licens ...

  5. Bash多个配置文件通常用于

    Login shells阅读下面的启动文件: 文件 内容 /etc/profile 对全部用户开放的全局配置文件 ~/.bash_profile 某个用户个人的启动文件,能用作个人的全局设置 ~/.b ...

  6. Lock_sga 和 pre_page_sga 参数详解

    Lock_sga 和 pre_page_sga 参数详解        Lock_sga 和pre_page_sga,是两个平时用的不算太多的参数,但是这两个参数平时在优化的时候可能给你带来比较乐观的 ...

  7. Delete和Truncate的区别

    原文:Delete和Truncate的区别 一般对于没有用的数据,都会经行删除,而删除通常使用的是DELETE和TRUNCATE命令.对于有条件地删除,基本上就会使用DELETE,当然还是没有绝对,用 ...

  8. 【蓝桥杯】 PREV-1 核桃数

    主题链接:http://lx.lanqiao.org/problem.page?gpid=T24   历届试题 核桃的数量   时间限制:1.0s   内存限制:256.0MB        问题描写 ...

  9. Java中的逆变与协变(转)

    看下面一段代码 Number num = new Integer(1); ArrayList<Number> list = new ArrayList<Integer>(); ...

  10. UVA 12538 Version Controlled IDE 解题报告

    题意:给三种操作 1.在p位置插入一个字符串. 2.从p位置开始删除长度为c的字符串 3.输出第v个历史版本中从p位置开始的长度为c的字符串 解法:可以用平衡树做,但是不会.后来又听说可一用一个叫ro ...