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 数组的 uniq 方法
Jan 23 Javascript
javascript eval函数深入认识
Feb 21 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
js返回顶部实例分享
Dec 21 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
vue中实现动态生成二维码的方法
Feb 21 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数据库抽象层 PDO
2011/05/07 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python实现图片批量剪切示例
2014/03/25 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
财政局长自荐信范文
2013/12/22 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
单位授权委托书范本
2014/09/26 职场文书
学校百日安全活动总结
2015/05/07 职场文书
公路施工安全责任书
2015/05/08 职场文书