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
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...
随机推荐
- 综合第一篇文章(带钩Quora)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDc4MzAyNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- ACdream: ACfun
ACfun Time Limit: 2000/1000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) SubmitStatisti ...
- Apple Watch开发了一些细节和总结
本文旨在总结最近Watch在发展中遇到的问题和细节 1.左右Watch真机调试问题 一般的情况下,你为IOS主应用创建了一个extention,比方说Today Extension .Xcode都会自 ...
- Mybatis之ResultMap一个简短的引论,关联对象
基础部分能够查看我的还有一篇博客http://blog.csdn.net/elim168/article/details/40622491 MyBatis中在查询进行select映射的时候.返回类型能 ...
- 使用RESTClient插件数据模拟(GET,POST)提交
1:在Firefox下载RESTClient插件安装 2:安装界面后, 3:点击设置头文件:(设请求地址有头部文件) 4:设置界面,当然有非常多选择.依据你的须要.一般在输入的时候有智能提示,我这里以 ...
- 3-08. 栈模拟队列(25)(ZJU_PAT 模拟)
主题链接:http://pat.zju.edu.cn/contests/ds/3-08 设已知有两个堆栈S1和S2,请用这两个堆栈模拟出一个队列Q. 所谓用堆栈模拟队列,实际上就是通过调用堆栈的下列操 ...
- 前端javascript模板
doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...
- rm-rf 恢复过程中滥用
多DBA一定rm -rf讨厌它,也许有一天自己将数据库,以消除一个中午,然后.那么就没有一个--这种情况下,--这个不幸真的发生,你真的无药可救?不必要,有解决方法.也许你遇到不幸时,有一天.你可以用 ...
- Mac下Jekyll安装
之前一直用Wordpress,虽然功能强大,各种插件各种bug,如果想弄个主题,折腾得要命.最近改用jekyll+gitHub免费空间.记录一下. 我用的是Mac,所以只讲述Mac下如何安装,Wind ...
- imagick获取图片的大小bug
<? php /* imagick的获取图片的高度和宽度函数有问题,使用GD函数可获得正确结果 gd函数 array getimagesize ( string $filename [, arr ...