innerTEXT与innerHTML的区别：

最新推荐文章于 2025-08-19 08:41:01 发布

原创最新推荐文章于 2025-08-19 08:41:01 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

JAVAScript 专栏收录该内容

14 篇文章

订阅专栏

本文详细解释了innerHTML、innerText与outerHTML的区别，并通过示例展示了它们在JavaScript中的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

innerHtml、innerText与outerHtml三者的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML、innerText与outerHTML的区别</title>
</head>
<body>
<div id="test">
<span style="color:#FF6600">test1</span>
<span style="color:#FF0000">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)">outerHTML内容</a>
</body>
</html>
在JS中可以使用：

test.innerHTML:
　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
　　上例中"innerHTML内容"的值也就是
<span style="color:#FF6600">test1</span><span style="color:#FF0000">test2</span>

test.innerText:
　　从起始位置到终止位置的内容, 但它去除Html标签
　　上例中"innerText内容"的值也就是“test1 test2”, 其中span标签去除了。
test.outerHTML:
　　除了包含innerHTML的全部内容外, 还包含对象标签本身。
　　上例中的"outerHTML内容"的值也就是
<div id="test">
<span style="color:#FF6600">test1</span>
<span style="color:#FF0000">test2</span>
</div>

test.outerText:
返回的也是 "test1 test2"

[img]http://dl2.iteye.com/upload/attachment/0085/8889/83aebc7a-3c2d-32dc-9e28-667c78e7ebbc.png[/img]