JavaScript 之 innerHTML、outerHTML、innerText、outerText的区别

今天看了很多文章关于innerHTML、outerHTML、innerText、outerText的区别，都是很模糊的一个介绍，所以自己总结下这些区别以及一些重点内容。很多文章在描述这些区别的时候，都是只针对一点进行描述，所以很难完全理解这些的字面含义以及区别点。

一、区别描述如下：（书上形式的说法）

innerHTML设置或获取位于对象起始和结束标签内的 HTML
outerHTML设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本

单单看这些文字很难弄懂什么标签啊获取啊，所以需要代码来实践证明，比较通俗易懂。

注意看描述：一个是设置，一个是获取。所谓设置就是我有一个标签，里面有文本内容或是没文本内容，我要去实现“替换”内容出现的所谓区别；所谓获取，就是同样一个个标签，里面有文本内容或是没文本内容我怎么去获取到它的内容出现的差异区别，所以在做代码实践时，要注意从这两个方面下手去做区别才能很好的全面了解差异性。

二、从”获取“对象内容上区别

<!DOCTYPE html>
<html>
<head>
    <meta charset= 'utf-8'>
    <title>HTML5自由者</title>
</head>
<body>
    <div id="test1">这是div中的文字<span>这是span中的文字</span></div>

    <script type="text/javascript">
        console.log('innerHTML:'+test1.innerHTML);
        console.log('outerHTML:'+test1.outerHTML);
        console.log('innerText:'+test1.innerText);
        console.log('outerText:'+test1.outerText);
    </script>
</body>
</html>

我们先来看下console控制台显示的运行结果：

innerHTML:这是div中的文字<span>这是span中的文字</span>

outerHTML:<div id=”test1”>这是div中的文字<span>这是span中的文字</span></div>

innerText:这是div中的文字这是span中的文字

outerText:这是div中的文字这是span中的文字

可以得出结论：

① innerHTML 获取对象起始和结束标签内的 HTML，即这里的对象是div标签，亦即这个标签里面所有的内容包含span标签也获取出来，即 “这是div中的文字<span>这是span中的文字</span>”（注意HTMl这个字的意思，也就是结构）

② outerHTML 是在①innerHTML基础上获取它的outer对象标签内容，也就是“<div id=”test1”>这是div中的文字<span>这是span中的文字</span></div>” 这些里面有什么内容及标签结构都获取出来。（注意HTMl这个字的意思，也就是结构）

③ innerText和outerText在获取时是相同效果都是获取<div> </div>标签里的文本内容，去除掉了<div> ,<span>标签，只显示div,span标签里的文本内容，即 “这是div中的文字这是span中的文字”（注意Text这个字的意思，也就是文本）

我先来看一张结构图，方便记忆下：

三、从”设置“对象内容上区别

先看代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset= 'utf-8'>
 <title>HTML5自由者——innerHTML、outerHTML和innerText、outerHTML的区别</title>
 <script language="JavaScript" type="text/javascript"> 
　　//.innerHTML
　　function innerHTMLDemo()
　　{ 
　　　test_id1.innerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　} 
　　//.innerText
　　function innerTextDemo()
　　{ 
　　　test_id2.innerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　} 
　　//.outerHTML
　　function outerHTMLDemo()
　　{ 
　　　test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　}
　　//.outerText
　　function outerTextDemo()
　　{ 
　　　test_id4.outerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　}
　</script> 
</head> 
<body> 
　<ul> 
　  <li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li> 
　  <li id="test_id2" onclick="innerTextDemo()">innerText效果.</li> 
　　<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li> 
　　<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li> 
　</ul> 
</body> 
</html>