jQuery 中 text() 和 html() 方法的区别

在jQuery中，text()和html()方法都用于获取或设置元素的内容。但是它们之间有一些重要的区别。

text()方法

text()方法用于获取或设置元素的文本内容，即去除所有HTML标签后的文本。

用法

// 获取元素文本内容
$(selector).text()

// 设置元素文本内容
$(selector).text(newText)

示例

HTML代码：

<div id="myDiv">
  <p>Hello <strong>world</strong>!</p>
</div>

JavaScript代码：

// 使用text()获取文本内容  
$('#myDiv').text(); // 返回 "Hello world!"

// 使用text()设置文本内容  
$('#myDiv').text('Hello Pikachu!');

注意事项

• text()方法设置元素的纯文本内容，所有HTML标签都将被去除。
• 如果选择器选取了多个元素，则text()方法将返回第一个元素的文本。

html()方法

html() 方法用于获取或设置元素的 HTML 内容，包括HTML标签和文本。

用法

// 获取元素HTML内容
$(selector).html()

// 设置元素HTML内容
$(selector).html(newHtml)

示例

HTML代码：

<div id="myDiv">
  <p>Hello <strong>world</strong>!</p>
</div>

JavaScript代码：

// 使用html()获取HTML内容  
$('#myDiv').html(); // 返回 "<p>Hello <strong>world</strong>!</p>"

// 使用html()设置HTML内容  
$('#myDiv').html('<p>Hello Pikachu!</p>');

注意事项

• 如果选择器选取了多个元素，则html()方法将返回第一个元素的HTML。

总结

text()方法用于获取或设置元素的纯文本内容，去除所有HTML标签；而html()方法用于获取或设置元素的HTML内容，包括HTML标签和文本。

在遇到需要修改多个元素内容时，最好使用text()或html()方法的回调函数。这样会更有效率，因为它们只需要遍历一次DOM树。

示例

$('p').text(function(index, oldText) {
  return oldText + ' [updated]';
});