HTML DOM textContent 与 innerHTML的区别

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>

结果：

HTML DOM textContent 与 innerHTML的区别

使用innerHTML

<script>
function myFunction()
{
var lst=document.getElementById("myList");
var x=document.getElementById("demo");  
x.innerHTML=lst.innerHTML;
}
</script>

结果：

HTML DOM textContent 与 innerHTML的区别

二者区别：

正如其名称，innerHTML 返回 HTML 文本。通常，为了在元素中检索或写入文本，人们使用innerHTML。但是，textContent通常具有更好的性能，因为文本不会被解析为HTML。此外，使用textContent可以防止 XSS 攻击。