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动态添加删除div 具体实现
Jul 20 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
不要在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
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
活动总结格式范文
2014/04/26 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
2015年基建工作总结范文
2015/05/23 职场文书