了解innerHtml的使用

 学习使用innerHtml,可以动态的实现一些想要的效果!

 

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

object.innerHTML

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

显示的结果是：<span style="color:red">test1</span><span style="color:blue">test2</span>

object.innerText

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

显示的结果是：test1 test2

object.outerHTML

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

显示的结果是：<DIV id=test><SPAN style="COLOR: red">test1</SPAN> <SPAN style="COLOR: blue">test2</SPAN> </DIV>

object.outerText

这个显示的结果与innerText没有什么区别(如果有发现不同的朋友告诉我一声,多谢了)

显示的结果是：test1 test2


上面的内容很抽象,看完下面的示例就能明白了

<div id = "test">
    <span style="color:red">test1</span>
    <span style="color:blue">test2</span>
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">innerText内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>
<a href="javascript:alert(test.outerText)">outerText内容</a>


另外说明一点的是这个四个属性只有innerHTML是符合W3C的标准的，其他三个只适用于IE浏览器

还有就是要在非IE的浏览器中输出与innerText一样的结果，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

可以使用innerHtml来做一个小例子:

<script type="text/javascript">

var start=0;

function jishi()

{

start++;

di.innerHtml=start;

}

</script>

<font color="#0000FF" size="14">

<div id="d1" align="center">0</div>

</font>

<div align="center">

<input type="button" value="开始计时" οnclick="intername=setInterval('jishi()',100)"; />

<input type="button" value="停止计时" οnclick="clearInterval(intername)"; />

</div>

今天学习了一点，有句话说的好，每天进步一点点！