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
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...
随机推荐
- Android-管理Activity生命周期 -重新创建Activity
按照正常的app行为,很少情况下activity会销毁,只有当用户点击了返回按钮或者activity通过调用finish()发出销毁信号.系统也有可能销毁activity如果它是停止状态并且很久没有使 ...
- Unity3D 表对象分类中的实现(C#)
// Sort by distance in descending order private void SortTargetsByDistance () { targets.Sort(delegat ...
- 大数据的胖哥的方式(9)- 金融业数据仓库的逻辑模型FS-LDM
介绍: 大数据是不是海市蜃楼,来自小橡子只是意淫奥克斯,大数据的发展,而且要从头开始,基于大数据建设国家.项目-level数据中心行业将越来越多,大数据仅供技术,而非溶液,临数据组织模式,数据逻辑模式 ...
- 存储管理(两):openfiler它accounts
存储管理(一个):openfiler演示和存储理解 openfiler的用户集中控制主要分为ldap和ad实现,当中openfiler本身可以作为ldapserver.使openfiler上的全部功能 ...
- 孙陪你,了解它的权力--Kinect结合的发展Unity3D游戏应用开发
unity3d正在使用kinect三维模型数据控制(它切成脚本) 博主在做项目时须要利用kinect数据控制三维模型中人物的动作.但不是实时控制,而是利用之前获得的骨骼数据,直接控制.无需再利用脚本打 ...
- myeclipse 8.5-10.0 安装 svn 方法(转)
方法总结 方法一:在线安装 1.打开HELP->MyEclipse Configuration Center.切换到SoftWare标签页. 2.点击Add Site 打开对话框 ...
- NYoj-Binary String Matching-KMP算法
Binary String Matching 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描写叙述 Given two strings A and B, whose alp ...
- GMSK调制仿真
GMSK 调制的的原理非常简单. 就是MSK调制前进行Gauss滤波. 在实现中有这样的方法,首先产生高斯系数,对称的上升陂和下降陂系数.输入一个符号,进行上采样,经过高斯滤波器,滤波器的输出做有符号 ...
- ExecutorService invokeAll 实例(转)
10个班级,每个班级20名学生,在指定的时间内查询每个班级学生的集合. package cn.com.ld.study.thread; import java.util.ArrayList; impo ...
- (大数据工程师学习路径)第一步 Linux 基础入门----正则表达式基础
介绍 虽然我们这一节的标题是正则表达式,但实际这一节只是介绍grep,sed,awk这三个命令,而正则表达式作为这三个命令的一种使用方式(命令输出中可以包含正则表达式).正则表达式本身的内容很多,要把 ...