博客

jquery text()和html()的区别

发布时间：2018-01-15 22:00:57

1.text()用来设置或返回被选元素的文本内容。

(1)返回被选元素文本内容

eg:

<p>
	<strong>Hi!</strong>
</p>

$('p').text();/*返回p元素的文本内容，不包括内容里的标签，只返回:Hi! */

(2)设置该元素的内容，将该元素的全部内容都替代掉。

eg:

<p>
	<strong>Hi!</strong>  //此时显示的是Hi!(粗体)
</p>

$('p').text('Hello,world!');//p标签的内容将全部被替代，显示为 Hello,world!(包括strong标签也被替代了，所以文本不再是粗体)

$('p').text('<strong>Hello,world!</strong>');//p标签的内容将全部被替代，显示为 Hello,world!(strong标签无效)

2.html()用来返回或设置被选元素内容(等同于原生dom的innerHTML)。

(1)返回被选元素所有内容(包括标签等）

eg:

<p>
	<strong>Hi!</strong>
</p>

$('p').html();//返回p元素的全部内容，包括内容里的标签，返回:<strong>Hi!</strong>

(2)设置该元素的内容，将该元素的全部内容都替代掉。

eg:

<p>
	<strong>Hi!</strong> //此时显示的是 Hi!(粗体)
</p>

$('p').html('Hello,world!');//p标签的内容将全部被替代，显示为 Hello,world!(包括strong标签也被替代了，所以文本不再是粗体)

$('p').html('<strong>Hello,world!</strong>');//p标签的内容将全部被替代，显示为Hello,world!(粗体)(strong标签有效)

3.text()和html()的区别

(1)text()只能返回文本内容，而html()可以返回元素的全部内容

(2)text(str)设置元素内容时，只有文本内容有效，其余内容无效；而html(str)设置元素内容时，所有内容有效(包括标签）

(3)text()返回所有匹配元素的内容，叠加；而html()只返回第一个匹配元素的内容

eg:

<p>Hi!</p><p>Hello!</p>

$('p').text();//返回内容为所有p元素的内容叠加:Hi!Hello!

$('p').html();//返回内容为第一个p元素的内容:Hi!