JQuery中的文本与innerHTML

Posted 2023-05-07

【中文标题】JQuery中的文本与innerHTML

【英文标题】：text vs innerHTML in JQuery

【发布时间】：2013-05-20 13:44:27

【问题描述】：

我从这两种方法得到相同的结果，但不知道为什么。对 SO 的研究告诉我：

.text() 仅返回该元素及其所有后代元素的文本，其中 .innerhtml 返回该元素中的所有 HTML。

然而，进一步的研究告诉我： 真正的问题是 text() 和 innerHTML 在完全不同的对象上运行。

我可以澄清一下吗？

HTML

<table id="table2">
<th> Col1 </th>
<th> Col2 </th>
<tbody>
<tr>
<td id="data">456</td>
</tr>
</tbody>
</table>

jQuery

$('td').click(function() 
    var x=$(this).text();
    alert(x); //returns '456'
)

var abc = document.getElementById('data');
var xyz = abc.innerHTML;
    alert(xyz); //also returns '456'

【问题讨论】：

是的，.text 是 jQuery 集合的方法，而 .innerHTML 是 html 节点的方法。两种完全不同的东西。一种是浏览器实现的，一种是jQuery实现的。它们各有不同的用途。

在单元格中添加一些元素，你会看到不同

【参考方案1】：

.text() 将返回该元素中所有文本节点的字符串表示形式，而.html() 将为您提供所有节点的表示形式。