IE中createElement需要注意的一个问题


Posted in Javascript onJuly 13, 2010

代码如下:

var $alertPanel = $( document.createElement("div") ); 
$alertPanel.css("width","120px").css("height","50px").text("Hello CssRain!"); 
$('body',parent.document).append($alertPanel);

顺着他的意思,我也写了个Demo,发现确实是这样。
翻了翻资料,也没看到类似的问题。
然后使用原生的DOM方法写了一次,发现也不行,一样。
var div = document.createElement("div"); 
div.style.width = "120px"; 
div.style.height = "50px"; 
div.style.border = "solid 1px #000000"; 
div.innerHTML = "Hello CssRain!"; 
parent.document.body.appendChild(div);

于是想到既然appendChild要parent.document,那么创建的时候是否也要parent.document.createElement呢?
于是把代码改成:
var div = parent.document.createElement("div"); 
div.style.width = "120px"; 
div.style.height = "50px"; 
div.style.border = "solid 1px #000000"; 
div.innerHTML = "Hello CssRain!"; 
parent.document.body.appendChild(div);

这样就成功了, IE6和IE7能用。
看例子:
演示地址:http://demo.3water.com/js/IE-createElement/page1.htm
总结:

如果你想在IE6,IE7中创建一个父页面元素,那么你必须使创建元素属于父页面。

var dummy = parent.document.createElement("div"); 
var t = parent.document.createElement("table");

在Firefox,IE8中,它允许在一个文档中创建要追加到另一个文档的元素。
所以在Firefox,IE8中,可以使用parent.document也可以使用document。

另外google浏览器非常怪异,很乱。如果要兼容google浏览器,那么建议换种思路吧,比如直接用 parent.函数名() 调父页面的方法。

Javascript 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
JS中的BOM应用
Feb 02 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
用vue设计一个日历表
Dec 03 Vue.js
不要在cookie中使用特殊字符的原因分析
Jul 13 #Javascript
初识javascript 文档碎片
Jul 13 #Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 #Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 #Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 #Javascript
javascript中字符串拼接需注意的问题
Jul 13 #Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 #Javascript
You might like
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python中什么是面向对象
2020/06/11 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
骨干教师培训制度
2014/01/13 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
《老王》教学反思
2014/02/23 职场文书
施工安全责任书
2014/04/14 职场文书
市级文明单位申报材料
2014/05/07 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2014年财政工作总结
2014/12/10 职场文书
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android