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下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
jQuery之按钮组件的深入解析
2013/06/19 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
文字自荐书范文
2014/02/10 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
明星邀请函
2015/02/02 职场文书
表彰大会新闻稿
2015/07/17 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
python区块链实现简版工作量证明
2022/05/25 Python