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 调试器简介
Feb 21 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP中的session安全吗?
2016/01/22 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
Python计算三维矢量幅度的方法
2015/06/15 Python
python如何通过protobuf实现rpc
2016/03/06 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python应用文件读取与登录注册功能
2019/09/23 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
DBA的职责都有哪些
2012/05/16 面试题
药品采购员岗位职责
2014/02/08 职场文书
前台文员职责范本
2014/03/07 职场文书
机电一体化求职信
2014/03/10 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
小学生春游活动方案
2014/08/20 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
学校实习推荐信
2015/03/27 职场文书
如何撰写促销方案?
2019/07/05 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers