JavaScript中innerText和innerHTML的区别

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #firefox #div #button #function #mozilla

Ajax技术专栏收录该内容

103 篇文章

订阅专栏

本文介绍了innerText和innerHTML两个属性的区别：innerText仅返回纯文本信息，而innerHTML返回完整的HTML代码。此外，文章还指出innerText并非所有浏览器都支持，如Firefox就不支持该属性，并提供了测试代码示例。

innerText和innerHTML区别:

innerText只返回文本信息而innerHTML将返回所有包含的元素和文本的HTML代码。

注意:innerText和innerHTML这2个属性并非DOM标准的一部分，但是现在大部分浏览器都支持这两个属性，例如：IE，Opera,Safari,Chrome等，但是也有例外。Mozilla就只支持innerHTML 。

测试代码如下:

代码1：

<html> <head> <title>InnerText Example</title> <style type="text/css"> div.special { background-color: red; padding: 10px; } </style> <script type="text/javascript"> function useInnerText() { var oDiv = document.getElementById("div1"); oDiv.innerText = "<b>Hello</b> world"; } </script> </head> <body> <div id="div1" class="special">This is my original text</div> <input type="button" value="Use InnerText" onclick="useInnerText()" /> <p><strong>Note: </strong> Firefox does not support the <code>innerText</code> property so this example will fail.</p> </body> </html>

代码2：

<<html> <head> <title>InnerText Example</title> <style type="text/css"> div.special { background-color: red; padding: 10px; } </style> <script type="text/javascript"> function useInnerText() { var oDiv = document.getElementById("div1"); oDiv.innerText = "<b>Hello</b> world"; } </script> </head> <body> <div id="div1" class="special">This is my original text</div> <input type="button" value="Use InnerText" onclick="useInnerText()" /> <p><strong>Note: </strong> Firefox does not support the <code>innerText</code> property so this example will fail.</p> </body> </html>

代码3：

<html> <head> <title>InnerText Example</title> <style type="text/css"> div.special { background-color: red; padding: 10px; } </style> <script type="text/javascript"> function useInnerText() { var oDiv = document.getElementById("div1"); oDiv.innerText = oDiv.innerText; } </script> </head> <body> <div id="div1" class="special"><b>Hello</b> world</div> <input type="button" value="Use InnerText" onclick="useInnerText()" /> <p><strong>Note: </strong> Firefox does not support the <code>innerText</code> property so this example will fail.</p> </body> </html>