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 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
Vue中使用vux的配置详解
May 05 Javascript
Less 安装及基本用法
May 05 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
php操作mongoDB实例分析
2014/12/29 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
详解JavaScript树结构
2017/01/09 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python实例一个类背后发生了什么
2016/02/09 Python
Python找出最小的K个数实例代码
2018/01/04 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
一个入门级python爬虫教程详解
2021/01/27 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
4s店活动策划方案
2014/08/25 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript