createElement、write和InnerHTML之间的差别
站点链接
RSS
在处理前面的文章中的级联菜单的时候,我发现了一个有意思的现象,使用CreateELement/InnerHTML/document.write的表现各自不一,自己测试了一下,呵呵,算得总结一下
1、CreateELement
createElement生成一个动态对象,这个对象创建之后是个无主对象,没有加到创建它的document中,需要使用appendChild或者insertBefore插入到document的DOM模型中才能生效。
createElement函数依附于Document对象,在使用Frame、IFrame或者popupWindow的时候一定需要注意,一个Document创建的对象是不能直接复制到另外的一个document中,所以创建对象的时候一定要站好队,不要加入了一个对象死活找不到,哈哈。
createElement可以使用两种用法,第一种最常用,直接输入一个标签的名称进行创建(大小写不敏感),例如document.createElement("A"),这种方式下创建的对象是一个空壳子,需要自己去填写属性。另外一种方法就是使用一段脚本创建,例如document.createElement("<a href='www.sina.com'>"),这种方式下,属性被带入到了对象中,需要注意的是,无论使用何种方式创建,document的createElement函数只创建单层对象,不会创建嵌套对象,例如脚本document.createElement("<div><a/></Div>")只会创建外层的DIV对象,不会创建A,同理,在DOM模型中文本作为一个特殊的节点存在,实例脚本document.createElement("<div>SSSS</div>")不会创建文本节点"SSS",也就是说节点创建完成之后还是一个光秃秃的DIV。
2、write
这个函数就有点意思了,先看看IE的官方说明:
这个函数在初始化的时候(文档没有最终生成的时候)会将文本信息如实写入到当前HTML的位置;但是初始化完成之后调用这个函数的时候则会清除掉当前的所有文档信息,看看实例
<script>
document.write("document.write:before init");
</script>
<b>InnerText</b><br/>
这个时候三段文本都可以正常显示,没有什么问题,但是我们试试在defer中调用
<script>
document.write("document.write:before init");
</script>
<b>InnerText</b><br/>
<script defer>
document.write("document.write:After init");
</script>
此时则只显示After Init这段文本,如文档所述,使用open函数可以避免将HTML的内容完全替代,结果我尝试了很多次,都是不行反倒频繁刷新当前页面,此处就不测试了。
我关心的是document在写入CSS和javascript的时候的表现
先测试的是写Javascript,看看能否实时生效,使用下面的脚本报错,原因是javascript的解析机制存在问题
<script>
document.write("<script>alert('aaa')</script>");
</script>
<b>InnerText</b><br/>
只好重新改改道路了
<script>
document.write("<script>alert('aaa')</script>");
</script>
<b>InnerText</b><br/>
很遗憾,直接显示的是
<script>alert('aaa')</script>
也就是说,在document中write脚本是作为文本直接处理,那么CSS又如何?
document.write("<style>a{color:red;font-weight:bold;}</style>");
</script>
<a href='javascript:void(0)'>This is a Anchor!</a>
奇妙的事情发生了,这个时候CSS风格居然奏效了
我还想测试一下在popwindow中的行为是否和在普通的document中一致
function testFun()
{
var win=window.createPopup();
win.document.write("<script>function fx(){alert();}</script>");
win.document.write("<a href='' onclick='fx();return false'>this is a anchor</a>");
win.show(0,0,100,100);
}
</script>
<button onclick="testFun()">点偶试试</button>
果无二致!不能生成<script>到新的窗口中,同样CSS可以成功写入。
3、innerHTML
这个属性的作用不用明说了,还是测试能够写入javascript和CSS
function testFun()
{
var x=document.getElementById("DIX");
x.innerHTML="<style>a{color:red;font-weight:bold;}</style>"+
"<a href='' onclick='fx();return false'>this is a anchor</a>";
}
</script>
<div id="DIX">
</div>
<button onclick="testFun()">点偶试试</button>
有些遗憾,CSS没有生效,同样,javascript页没有生效
测试表明,CSS的写入必须使用write方式,或者直接构造DOM对象方式,而javascript动态加入只能使用eval或者动态构造DOM对象方式,都不是一件轻松的活啊
4、document.createElement("script")
C盘下的atest.js的内容很简单
function fx()
{
alert("处理点击事件");
}
测试脚本如下
function testFun()
{
var win=window.createPopup();
var x=win.document.createElement("script");
x.src="c:\\atest.js";
win.document.body.appendChild(x);
win.document.write("<button onclick='fx()'>this is a anchor</button>");
win.show(0,0,100,100);
}
</script>
<div id="DIX">
</div>
<button onclick="testFun()">点偶试试</button>
<button onclick='fx()'>this is a anchor</button>
上面一段代码运行之后点击"点偶试试",会加载atest到新的窗口中并弹出“偶被成功的加载鸟”消息,然后点击弹出窗口中的按钮则弹出“处理点击事件”,而实际上,“偶被成功的加载鸟”消息能够正常显示,而事件处理的消息没有显示,无论在主页面中点击还是弹出窗口中点击都无效,有些郁闷呢!