原文: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. 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连续7-电话问卷调查

    [例7-3  文本编辑框创建一个简单的调查问卷] 01     <!DOCTYPEhtml> 02     <html> 03     <head> 04     ...

  2. Server SAN:弄潮儿云计算时代

    最初发表于<程序猿>2014年7每月一次. 4月30日本.Redhat公布1.71十亿收购Ceph开发商Inktank公司,加上之前2011年10月1.36十亿收购Gluster,Redh ...

  3. SIGPIPE并产生一个信号处理

    阅读TCP某物,知道server并关闭sockfd当写两次,会产生SIGPIPE信号,假如不治疗,默认将挂起server 弄个小样本试验: #include <unistd.h> #inc ...

  4. HDU 4300 Clairewd’s message(扩展KMP)

    思路:extend[i]表示原串以第i開始与模式串的前缀的最长匹配.经过O(n)的枚举,我们能够得到,若extend[i]+i=len且i>=extend[i]时,表示t即为该点之前的串,c即为 ...

  5. 备注ocp_ORACLE专题网络

    声明:原创作品,出自 "深蓝的blog" 博客.欢迎转载.转载时请务必注明出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanl ...

  6. 刷牙LeetCode思考

    时间已经到了不自觉地,3在五月中旬.今天正式LeetCode自由181刷牙的问题.感觉,以提高他们的算法非常有帮助. 第一个主要的深搜索,广泛搜索,DP他已经掌握7788.也有自己写的代码格公式,使用 ...

  7. 原生js实现 常见的jquery的功能

    原生选择器   充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...

  8. 基于NSIS脚本开发的安装程序制作软件:易量安装

    原文 基于NSIS脚本开发的安装程序制作软件:易量安装 前几天“萝卜”给我推荐了一款安装程序制作工具——易量安装. 易量安装是一款安装程序制作软件,基于著名的NSIS(Nullsoft Scripta ...

  9. win8 iis7/iis8 安装、卸载、设置方法

    原文:win8 iis7/iis8 安装.卸载.设置方法 一.安装 自从升级到Win8之后,之前使用已经趋于熟悉的iis7.0被取而代之的是iis8.0,那么安装和获取方法也就产生的略微的变化,为了避 ...

  10. 五个项目管理学习笔记.沟通技巧II

    两.通信模型:沟通的双向过程 沟通模型: 编     码---------------->信息-----------------> 解码&歧义 发送者               ...