HTML DOM textContent：設置或者返回指定節點的文本內容。
HTML DOM innerHTML：設置或返回表格行的開始和結束標簽之間的 HTML。
例如下面例子：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <ul id="myList"><li id="item1">Coffee</li><li id="item2">Tea</li></ul> 6 <p id="demo">點擊按鈕來獲得列表元素的文本內容。</p> 7 <button onclick="myFunction()">試一下</button> 8 9 </body> 10 </html>
使用HTML DOM textContent
1 <script> 2 function myFunction() 3 { 4 var lst=document.getElementById("myList"); 5 var x=document.getElementById("demo"); 6 x.innerHTML=lst.textContent; 7 } 8 </script>
結果：
使用innerHTML
<script> function myFunction() { var lst=document.getElementById("myList"); var x=document.getElementById("demo"); x.innerHTML=lst.innerHTML; } </script>
結果：
二者區別：
正如其名稱，innerHTML 返回 HTML 文本。通常，為了在元素中檢索或寫入文本，人們使用innerHTML。但是，textContent通常具有更好的性能，因為文本不會被解析為HTML。此外，使用textContent可以防止 XSS 攻擊。