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>
结果：
使用innerHTML
<script> function myFunction() { var lst=document.getElementById("myList"); var x=document.getElementById("demo"); x.innerHTML=lst.innerHTML; } </script>
结果：
二者区别：
1 | 正如其名称，innerHTML 返回 HTML 文本。通常，为了在元素中检索或写入文本，人们使用innerHTML。但是，textContent通常具有更好的性能，因为文本不会被解析为HTML。此外，使用textContent可以防止 XSS 攻击。 |
本文作者：言叶以上
本文链接：https://www.cnblogs.com/anqwjoe/p/8422843.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步