come on babay

come on babay,Love me ,love yourself.

2007/05/19

 

innerHtml 和 innerText

用法:

<div id="test">
    <span style="color:red">test1</span> test2
</div>

在JS中可以使用:

test.innerHTML:

  也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

  上例中的test.innerHTML的值也就是"<span style="color:red">test1</span> test2 "。

test.innerText:

  从起始位置到终止位置的内容, 但它去除Html标签

  上例中的text.innerTest的值也就是"test1 test2", 其中span标签去除了。

test.outerHTML:

  除了包含innerHTML的全部内容外, 还包含对象标签本身。

  上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>


完整示例:

<div id="test">
    <span style="color:red">test1</span> test2
</div>

<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert( test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明:

  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

<a href="javascript:alert(document.getElementById ('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

让innerHTML中的script脚本执行起来

在我们使用AJAX的时候,经常要用到innetHTML来更新对象的内容,但是对于更新的<script>脚本程序浏览器却无法执行,我前面AJAX初学常遇问题解答这篇文章曾提到过这个问题,它不执行的原因是:<script>标签只在浏览器第一次文档加载中被解析,下面介绍怎么样让<script>跑起来。

分析问题

既然<script>只在文档加载中才被解析,那么我就得调用document.write()方法来重新加载一次,但是这样的话原来页面的内容也会被覆盖掉了,所以不得不用IFRAME把document.write()装载起来。

解决问题
 var jsCode = 需要执行的JS代码  var jsIframe = document.createElement("iframe");  jsIframe.style.display = "none";//把jsIframe隐藏起来  document.body.appendChild(jsIframe);  with(window.frames[window.frames.length - 1]){   document.open();   document.write(jsCode); //执行JS代码   document.close();  }  document.body.removeChild(jsIframe);//执行后删除iframe对象 

这里需要注意一个问题,因为jsCode是在iframe中运行,所以所有的页面元素都在iframe父对象之下,要调用页面元素对象必须得用 parent.obj 这种方式。

另外一种方法:

用dom动态创建一个script对象
var script=document.createElement("script");

script.src="XXXX.js";
document.body.appendChild (script);



--
我的网络营销boogger
http://china-news-it.blogspot.com





<< 主页

存档

2007/4/8 - 2007/4/15   2007/4/15 - 2007/4/22   2007/4/22 - 2007/4/29   2007/4/29 - 2007/5/6   2007/5/6 - 2007/5/13   2007/5/13 - 2007/5/20   2007/5/20 - 2007/5/27   2007/5/27 - 2007/6/3   2007/6/3 - 2007/6/10   2007/6/10 - 2007/6/17   2007/6/17 - 2007/6/24   2007/6/24 - 2007/7/1   2007/7/8 - 2007/7/15   2007/12/2 - 2007/12/9   2007/12/9 - 2007/12/16   2007/12/16 - 2007/12/23   2009/10/18 - 2009/10/25   2010/1/10 - 2010/1/17  

This page is powered by Blogger. Isn't yours?

订阅 博文 [Atom]