innerHTML和innerText的用法

2020-09-19 11:12:38

字体：大中小

来源：转载

供稿：网友

用法：

在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>

上一篇：单击按钮复制定义好的内容到剪贴板

下一篇：Firebug Lite使用在IE、Opera、Safari浏览器