document對象中有innerHTML、innerText這兩個屬性，都是獲取document對象文本內容，但使用起來還是有區別的；
1） innerHTML設置或獲取標簽所包含的HTML+文本信息(從標簽起始位置到終止位置全部內容，包括HTML標簽，但不包括自身)
2） outerHTML設置或獲取標簽自身及其所包含的HTML+文本信息（包括自身）
3） innerText設置或獲取標簽所包含的文本信息（從標簽起始位置到終止位置的內容，去除HTML標簽，但不包括自身）
4） outerText設置或獲取標簽自身及其所包含的文本信息（包括自身）
innerText和outerText在獲取的時候是相同效果，但在設置時，innerText僅設置標簽所包含的文本，而outerText設置包含包括標簽自身在內的文本。
示例代碼：
通過IE瀏覽器打開，彈出內容為"hello world"和"hello world"
通過Firefox瀏覽器打開，彈出內容為"hello world"和"undefined"
通過chrome瀏覽器打開，彈出的內容為"hello world"和"hello world"
alert(content.outerHTML)則彈出："<p id="p1">hello world</p>"
示例2
通過IE瀏覽器打開，彈出內容為"<p id="p1">hello world</p>"和"hello world"
通過Firefox瀏覽器打開，彈出內容為"<p id="p1">hello world</p>"和"undefined"
通過chrome瀏覽器打開，彈出的內容為"<p id="p1">hello world</p>"和"hello world"
alert(content.outerHTML)則彈出："<div id="d1"><p id="p1">hello world</p></div>"
綜上：innerHTML所有瀏覽器都支持，innerText是IE瀏覽器支持的，Firefox瀏覽器不支持。
不同之處：
1） innerHTML、outerHTML在設置標簽之間的內容時，包含的HTML會被解析；而innerText、outerText則不會；
2） innerHTML、innerText僅設置標簽之間的文本，而outerHTML、outerText設置包含自身標簽在內文本
總結說明
innerHTML是符合W3C標准的屬性，而innerText只適用於IE瀏覽器（現在也適應chrome瀏覽器），因此，
盡可能地去使用 innerHTML，而少用innerText，如果要輸出不含HTML標簽的內容，可以使用innerHTML取得包含HTML標簽的內容后，
再用正則表達式去除HTML標簽，下面是一個簡單的符合W3C標准的示例：
<html>
<head><title>innerHTML</title></head>
<body>
<div id="d1"><p id="p1">hello world </p></div>
<script>
var content = document.getElementById("p1");
alert(content.innerHTML.replace(/& lt;.+?>/gim,''));
</script>
</body>
</html>
彈出的為去掉了html標簽之后的內容，這是個在所有瀏覽器均可使用的方法。
-------------------------------------------------------------------------------------------------------------------------------------------------------------
https://blog.csdn.net/qq_29924041/article/details/78483796
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta charset="UTF-8"><!--申明當前網頁的編碼集UTF-8--> 7 <meta name="Generator" content="EditPlus®"> <!--編輯器的名稱--> 8 <meta name="Author" content="作者是誰"> 9 <meta name="Keywords" content="關鍵詞"> 10 <meta name="Description" content="描述和簡介"> 11 <style type="text/css"> 12 body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;} 13 ul,ol{margin: 0; list-style: none; padding: 0;} 14 a{ text-decoration: none; } 15 *{ margin: 0; padding: 0; } 16 .fl_l{float: left} 17 .clearfix:after{clear: both;content: "";display: block} 18 .main{width: 800px;margin: 40px auto;box-shadow: 0 0 10px 0 deeppink} 19 p{width: 200px;height: 200px;box-shadow: 0 0 10px 0 blue;margin: 10px} 20 21 </style> 22 </head> 23 <body> 24 <div class="main"> 25 <div class="compare1 clearfix" > 26 <p class="fl_l" id="innerHTML_1">innerHTML_1</p> 27 <p class="fl_l" id="innerText_1">innerText_1</p> 28 </div> 29 <div class="compare2 clearfix"> 30 <p class="fl_l" id="innerHTML_2">innerHTML_2</p> 31 <p class="fl_l" id="innerText_2">innerText_2</p> 32 </div> 33 </div> 34 <script> 35 var innerHTML_1 = document.getElementById("innerHTML_1"); 36 var innerText_1 = document.getElementById("innerText_1"); 37 var innerHTML_2 = document.getElementById("innerHTML_2"); 38 var innerText_2 = document.getElementById("innerText_2"); 39 40 innerHTML_1.onmouseover = function () { 41 this.innerHTML = "innerHTML_1 function"; 42 } 43 innerText_1.onmouseover = function () { 44 this.innerText = "innerText_1 function"; 45 } 46 innerHTML_2.onmouseover =function () { 47 this.innerHTML = "<span style='color: red'>innerHTML_2 function<span>"; 48 } 49 innerText_2.onmouseover = function () { 50 this.innerText = "<span style='color: red'>innerHTML_2 function<p>"; 51 } 52 </script> 53 </body> 54 </html>
從上面可以看到，如果從純文本的角度來理解的話，innerHTML和innerText都是一樣的，因為在添加字符串這樣數據的時候，是沒有任何區別的，
但是如果從標簽的角度來進行加載的話，innerHTML是可以去進行標簽的解析的，也就是可以動態的再去加載標簽，但是innerText確是以文本的形式進行顯示的
這也就是它們主要的區別，雖然都是可以在標簽中添加內容，但是不同的應用場景下，使用的標簽頁也是需要不同的