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 相关文章推荐
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
不要在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
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php实现微信公众号无限群发
2015/10/11 PHP
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python实现list反转实例汇总
2014/11/11 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
python3.7调试的实例方法
2020/07/21 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
《雨点》教学反思
2014/02/12 职场文书
货车司机岗位职责
2014/03/18 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP