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清空textarea等输入框实现代码
Apr 22 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 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
php Try Catch异常测试
2009/03/01 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
JScript的条件编译
2007/05/29 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
python如何把字符串类型list转换成list
2020/02/18 Python
解决django FileFIELD的编码问题
2020/03/30 Python
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
心得体会范文
2014/01/04 职场文书
会计的岗位职责
2014/03/15 职场文书
农村党员一句话承诺
2014/05/30 职场文书
党员干部廉政承诺书
2015/04/28 职场文书