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 攻击。