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脚本的性能的几个注意事项
Dec 22 Javascript
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
javascript类继承机制的原理分析
Sep 12 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
canvas实现探照灯效果
Feb 07 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 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
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
php的一个登录的类 [推荐]
2007/03/16 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python路径的写法及目录的获取方式
2019/12/26 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
幼儿园优秀教师事迹
2014/02/13 职场文书
团结演讲稿范文
2014/05/23 职场文书
售房委托书
2014/08/30 职场文书
杜甫草堂导游词
2015/02/03 职场文书
企业百日安全活动总结
2015/05/07 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
学校教师培训工作总结
2015/10/14 职场文书