`

innerText、outerText、innerHTML与outerHTML的区别 实例详解

阅读更多
innerText、innerHTML与outerHTML、outerText的区别 实例详解
1.x.innerHTML: 从对象的起始位置到终止位置的全部内容,包括Html标签。
2.x.innerText: 从对象的起始位置到终止位置的内容, 去除Html标签。
3.x.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。


看实例代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <BODY>
<div id="div">
	<input name="button" value="Button" type="button">
	<font color="green">
		<h2>This is a DIV!</h2>
	</font>
</div>
<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">
 </BODY>
</HTML>


上例中 x.innerHTML 的值也就是“<span style=”color:red”>z1</span> z2 ”。
上例中 x.innerTest 的值也就是“z1 z2”, 其中span标签被去除了。
上例中 x.outerHTML 的值也就是<div id=”x”><span style=”color:red”>z1</span> z2</div> 。

特别说明:
innerHTML符合W3C标准,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('x').innerHTML.replace(/<.+?>/gim,''))">无HTML标签,符合W3C标准</a>
  • 大小: 5.4 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics