您的位置：首页 > Web前端 > HTML

InnerHTML、OuterHTML、InnerText、OuterHTML的区别：

2013-02-21 08:40 309 查看

InnerHTML、OuterHTML、InnerText、OuterHTML的区别：

.NET Framework类库中：

InnerHTML、InnerText包含在System.Web.UI.HtmlControls命名空间内。

InnerHTML：设置或返回HTML 服务器控件的开始标签和结束标签内的HTML文本。不自动对进出 HTML 实体的特殊字符进行编码。

InnerText：设置或返回HTML 服务器控件的开始标签和结束标签内的文本，自动对标记中的特殊字符（如”<”、“>"等）转换HTML等价的实体。（有关HTML实体的请参考以下链接：http://blog.csdn.net/liangneng/article/details/8598939）。

如HTML中的内容是：

<html>
<body>
<form id="form1" runat="server">
<div id="div1" runat="server"></div>
</form>
</body>
</html>

设置div1中的值：

div1.InnerText= "<p>< change;</p>";

则服务器会对字符串“<p>< change;</p>”中的特殊字符进行编码，并插入在div1标签内。最终呈现的HTML的页面中div1标签内容如下：

<div id="div1"><p>< change;</p></div>

且浏览器显示为：<p>< change;</p>

如果设置div1中的值：

div1.InnerHtml="<p>< change;</p>";

服务器不会对字符串” <p>< change;</p>”中的特殊字符进行编码，并插入在div1标签内。最终呈现的HTML的页面源代码中div1标签内容如下：
<div id="div1"><p>< change;</p></div>

且浏览器显示为：< change

JavaScript中：

innerHTML：设置或获取位于对象起始和结束标签内的HTML格式的内容；

outerHTML：设置或获取对象及其自身标签在内的 HTML 格式的内容；

innerText：设置或获取位于对象起始和结束标签内的文本内容（不包括HTML标签）；

outerText：设置(包括标签)或获取(不包括标签)对象的文本内容；

有HTML如下所示：

<html>
<body>
<form id="form1" runat="server">
<div id="test">
<span>初始内容：</span><br />

<em>123</em><span style="color: red">   test1    </span>test2
</div>
<span id="content" runat="server"></span>
<input type="button" id="button1" value="click me" onclick ="change()"/>
</form>
</body>
</html>

用于测试的JavaScript脚本：

<script type="text/javascript">
function change(){
content.innerHTML =".innerHTML:<br/>"
content.innerText +=test.innerHTML ;
content.innerHTML +="<br/>.innerText:<br />";
content.innerText +=test.innerText;
content.innerHTML +="<br/>outerHTML:<br />";
content.innerText +=test.outerHTML;
content.innerHTML +="<br/>outerText:<br />";
content.innerText += test.outerText;
content.innerHTML +="<br/>";
}
</script>

输出：

.innerHTML:

<span>初始内容：</span><br>

<em>123</em><span style="color: red"> test1 </span>test2

.innerText:
初始内容：
123 test1 test2
outerHTML:
<div id="test">
<span>初始内容：</span><br>

<em>123</em><span style="color: red"> test1 </span>test2
</div>
outerText:
初始内容：
123 test1 test2

说明：

innerHTML：注意方法的大小写。

如果不明白上面出现的空行，在这里补充一下页面中有关空格和换行的知识：

<br />标签表示一个换行。HTML的实体集规定：用" "表示一个空格。

不管书写时如何编排空格和回车换行符，浏览器显示HTML页面时，相邻两个可显示的文本之间的多个回车换行符或空格合并为一个空格。

如：HTML签标<span> 1 2 </span>显示成：1 2 ，1的前面没有显示空格。

而每遇到一个“ ”就插入一个显示空格，每遇到一个<br />标签就进行换行显示。如：

待补充内容：设置值时的区别。
参考资料： http://blog.163.com/suizhikuo@126/blog/static/3162816220127177504196/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： innerHTML innerText OuterHTML OuterText

相关文章推荐

新的分享

章节导航