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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
js实现自定义路由
Feb 04 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
实用的Vue开发技巧
May 30 Javascript
vue监听dom大小改变案例
Jul 29 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP简单日历实现方法
2016/07/20 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
js 表格隔行颜色
2009/12/02 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
python模块之paramiko实例代码
2018/01/31 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python 获取div标签中的文字实例
2018/12/20 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
主办会计岗位职责
2014/03/13 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
新闻编辑求职信
2014/04/09 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
长征观后感
2015/06/09 职场文书
2015年暑期见闻
2015/07/14 职场文书