IE中createElement需要注意的一个问题

代码如下：


代码如下:

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.jb51.net/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.函数名() 调父页面的方法。

赞 (0)

相关推荐

  • document.createElement()用法及注意事项(ff下不兼容)

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 复制代码 代码如下: var inputObj    = document.createElement      ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " r

  • createElement与createDocumentFragment的点点区别小结

    网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题,比如: 复制代码 代码如下: var arrText=["1","2","3","4","5","6","7","8","9","10"];

  • 动态加载js文件 document.createElement

    复制代码 代码如下: var Rash=true; var msg=""; function norash() { if (confirm("确定要取消吗")) Rash=false; } function rashit() { setInterval('getrss()',Inttime); } function getrss() {         if (Rash==true)         {         head=document.getElemen

  • createElement动态创建HTML对象脚本代码

    1.创建链接 复制代码 代码如下: <script language="javascript"> var o = document.body; //创建链接 function createA(url,text) { var a = document.createElement("a"); a.href = url; a.innerHTML = text; a.style.color = "red"; o.appendChild(a);

  • getElementByID、createElement、appendChild几个DHTML元素第1/2页

    DOCUMENT中的任一个标签: 1.getElementById() getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素. 比如说有一个DIV的ID为docid: <div id="docid"></div> 那么就可以用getElementById("docid")来获得这个元素. <html> <head> <meta h

  • document.createElement()用法

    document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="board"></div>例1: 复制代码 代码如下: <script

  • Javascript createElement和innerHTML增加页面元素的性能对比

    最近遇到js的效率问题,是关于在页面中新增元素的问题. 假设我们有页面如下: 复制代码 代码如下: <HTML> <HEAD> </HEAD> <BODY> <div id="div1"></div> </BODY> <script> // 脚本位置 </script> </HTML> 现在,我们要往div1中添加对象,大家都知道在为web页面增加一个元素时可以使用如

  • javascript createElement()创建input不能设置name属性的解决方法

    其中obj.name = "select";这句话并不能起到预期的作用,无论是看生成后的HTML代码还是观察使用document.getElementsByName()获取的数组长度,都会发现这个name设置并没有起作用.当然这种情况只出现在IE6和IE7中,而在FireFox中是没有问题的. Test function addInput(){ var div = document.getElementById("testDiv"); var obj = docum

  • document.createElement("A")比较不错的属性

    搞了一天,终于把A里面的属性弄出来 代码1: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 代码2: New Document function newelement(){ var a=document.createElement("a"); a.href="javascript:alert('A link.')"; a.innerHTML="aaa"; var img=new Image(); img.src="http

  • IE中createElement需要注意的一个问题

    代码如下: 复制代码 代码如下: var $alertPanel = $( document.createElement("div") ); $alertPanel.css("width","120px").css("height","50px").text("Hello CssRain!"); $('body',parent.document).append($alertPanel);

  • Vue 中 template 有且只能一个 root的原因解析(源码分析)

    引言 今年, 疫情 并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...).然后,在前段时间也看到一个这样的关于 Vue 的问题, 为什么每个组件 template 中有且只能一个 root? 可能,大家在平常开发中,用的较多就是 template 写 html 的形式.当然,不排除用 JSX 和 render() 函数的.但是,究其本质,它们最终都会转化成 render() 函数.然后,再由 render() 函数转为 Vritual DOM (以下统称 VNode ).而 rende

  • Asp.net中通过Button打开另一个的frm

    废话不多说了,直接给大家贴代码了,代码中有注释,大家多看看. private void Form1_FormClosing(object sender, FormClosingEventArgs e) { DialogResult re = MessageBox.Show("确定离开吗","询问",MessageBoxButtons.YesNo,MessageBoxIcon.Question); if(re==DialogResult.No) { e.Cancel

  • asp.net在事件中启动线程来打开一个页面的实现方法

    在页面点击一个按钮,其目的是在按钮中做两件事情,一件需要点击按钮马上完成,另一件事情是点击按钮后做其他事情.如果按顺序一次做完感觉特别耗时,下面简单罗列一下. protected void Button1_Click(object sender, EventArgs e) { Label1.Text = TextBox1.Text; //在这做第一件事情 dowork(); //做完后马上启动线程 System.Threading.Thread thread = new System.Threa

  • PHP中使用array函数新建一个数组

    PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型.此类型在很多方面做了优化,因此可以把它当成真正的数组,或列表(向量),散列表(是映射的一种实现),字典,集合,栈,队列以及更多可能性.由于数组元素的值也可以是另一个数组,树形结构和多维数组也是允许的. array (PHP 4, PHP 5) array - 新建一个数组 说明 复制代码 代码如下: array array ([ mixed $... ] ) 返回根据参数建立的数组.参数可以用 => 运算

  • 关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    书写jQuery EasyUI Tab 样例时,如果刷新前面的Tab 选项卡,某一个Tab 选项卡里面的页面布局变乱.如下面图片所示: 刚开始打开时页面布局正确: 此时我们在第二个选项卡里面,点击第一个页面的刷新按钮,一直刷新,然后切换回来再看看页面,如下图: 但是首页选项卡的页面是正常的. 为了便于解释说明,这里用第一个选项卡代表 "首页",第二个选项卡代表"子菜单10" 出现这种情况的问题根本原因在于,你在第二个选项卡里面,点击其它第一个选项卡刷新按钮时,其实刷

  • javascript中createElement的两种创建方式

    本文实例讲述了javascript中createElement的两种创建方式.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CreateElement

  • Yii框架参数化查询中IN查询只能查询一个的解决方法

    本文实例讲述了Yii框架参数化查询中IN查询只能查询一个的解决方法.分享给大家供大家参考,具体如下: 在yii框架中使用参数化进行IN查询时,结果不如所愿 $sql =<<<SQL SELECT id FROM tb WHERE id IN(:ids) SQL; $db = GeneralService::getSlaveDB(); $result = $db->createCommand($sql)->query([':ids' => '1013,1015,1017'

  • Python 实现在文件中的每一行添加一个逗号

    步骤1:读取每行(每行的类型是str) 步骤2:对每行列表化 步骤3:弹出每行的/n两个字符 步骤4:追加,/n三个字符 代码实现如下: #import os From_file=open('D:\\python\\A\\tianqi.txt') f=open('niuniu1.txt','w') count=0 huancun=[] for each_line in From_file: #print(type(each_line)) each_line 是字符类型 Delstr=list(e

  • C#中#define后面只加一个参数的解释

    #define只加一个参数 的解释 <stdio.h> 里有: #ifndef __STDIO_H #define __STDIO_H 这个__STDIO_H代表什么?而define的用法不是后面加两个字符串吗,它这里却只加一个字符串,是什么意思? 还有很多头文件里都有如下语句 #if __STDC__ #define _Cdecl #else #define _Cdecl cdecl #endif __stdc__,cdecl代表什么? 比方说你#include进来一个stdio.h,再#i

随机推荐