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

在jQuery中，text()和html()方法都是用于修改或获取DOM元素的内容。但两者有一些明显的区别，接下来我们将进行详细的介绍。

text()方法

text()方法可以用于获取或设置元素的文本内容，无论该元素包含的是文本还是HTML标签，都将返回纯文本（文本内容会自动转义）。

获取文本内容

下面是获取元素文本内容的示例代码：

let text = $("p").text();
console.log(text); // "这是一个段落"

text()方法在没有参数时，将返回匹配元素的所有文本内容。在上面的代码示例中，获取的是匹配第一个

元素的文本内容。

设置文本内容

我们还可以使用text()方法来设置元素的文本内容。下面是设置文本内容的示例代码：

$("p").text("这是修改后的文本内容");

上面的示例代码将会把匹配所有的

元素的文本内容都修改成"这是修改后的文本内容"。

html()方法

html()方法的作用和text()方法类似，但它返回的是包含HTML标签的所有内容。

获取html内容

下面是获取元素HTML内容的示例代码：

let html = $("p").html();
console.log(html); // "这是一个段落 <a href="#">链接</a>"

html()方法在没有参数时，将返回匹配元素的所有HTML内容。在上面的代码示例中，获取的是匹配第一个

元素的HTML内容。

设置HTML内容

我们还可以使用html()方法来设置元素包含HTML标签的内容。下面是设置HTML内容的示例代码：

$("p").html("这是修改后的HTML内容 <a href='#'>链接</a>");

上面的示例代码将会把匹配所有的

元素的HTML内容都修改成"这是修改后的HTML内容 链接"。

总结

text()方法和html()方法都可以用于获取或设置元素的内容。但是它们有以下的不同点：

• text()方法返回的是匹配元素的纯文本内容，html()方法返回的是包含HTML标签的所有内容。
• 操作text()方法只能得到或设置文本，无法让文本内容中包含HTML标签。操作html()方法可以得到或设置元素的HTML标签的内容，可以包含HTML标签。
• 在设置内容时，text()方法会进行自动转义，防止XSS攻击。而html()方法不会进行转义处理，需要程序员自己注意是否存在潜在的安全隐患。

综上所述，我们在使用text()和html()方法时，需要根据实际需求来选择使用哪个方法。