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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
Jul 08 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
js随机生成一个验证码
2017/06/01 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
基于Python 函数和方法的区别说明
2021/03/24 Python
公司中秋节活动方案
2014/02/12 职场文书
火锅店的活动方案
2014/08/15 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
邀请函样本
2015/02/02 职场文书
体育教师个人总结
2015/02/09 职场文书
以权谋私检举信范文
2015/03/02 职场文书
员工工作表扬信
2015/05/05 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript