innerText，innerHTML,outerHTML的用法

最新推荐文章于 2025-11-25 08:44:41 发布

原创最新推荐文章于 2025-11-25 08:44:41 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #正则表达式 #IE #脚本 #浏览器

HTML CSS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了JavaScript中innerHTML和outerHTML属性的作用与用法，通过实例对比了两者之间的区别，并提供了符合W3C标准的示例代码。

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

在JS中可以使用：
test.[b]innerHTML[/b]:
　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
　　上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2

test.[b]innerText[/b]:
　　从起始位置到终止位置的内容, 但它去除Html标签
　　上例中的text.innerTest的值也就是“test1 test2”,其中span标签去除了

test.[b]outerHTML[/b]:
　　除了包含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有自动检查语法的功能,它会把不完整的HTML代码补充完整,这点可以说是神奇,例如下面的这段脚本

<head>
<script language="javascript">
function Get(){
  var tab=document.getElementById("tab")
  tab.innerHTML="<table><tr>";
  alert(tab.innerHTML);
}
</script>
</head>
<body>
<p id="tab" onclick="Get()">
请点我啦!!!
</p>
</body>
</html>

还有一种情况，设置的时候:
HTML:<DIV ALIGN="left" id="div"><p>hello world!!!</p>ddddd</DIV>

div.innerText = "<p>abcdef</p>";
结果为:
<DIV ALIGN="left" id="div"><p>abcdef</p></DIV>
此是对<p></p>不做HTML解析页面直接显示为<p>abcdef</p>

div.innerHTML = "<p>abcdef</p>";
结果为:
<DIV ALIGN="left" id="div"><p>abcdef</p></DIV>
此是对<p></p>会做HTML解析页面只显示abcdef

div.outerText = "<p>abcdef</p>";
结果为:
<p>abcdef</p>
此是对<p></p>不做HTML解析将以前的对象标签给替换掉了,
这个时候是操纵是div本身页面直接显示为<p>abcdef</p>

div.outerHTML = "<p>abcdef</p>";
结果为:
<p>abcdef</p>
此是对<p></p>会做HTML解析
这个时候是操纵也是div本身
页面只显示abcdef

最后,[b]outerText[/b]和[b]innerText[/b]在取得数据的时候没有区别,而在设置值的时候就有区别
请记住inner操纵的是对象里面的东西
outer操纵的是对象本身,也就是要比inner大一级吧,
[b]innerHTML[/b]：得出调用该方法的节点下的HTML代码，但不包括该节点本身的HTML代码
[b]outerHTML[/b]:得出调用该方法的节点及该节点下的HTML代码