jQuery text() 和 html() 之间有什么区别

作者:编程家 分类: js 时间:2025-07-14

jQuery是一种流行的JavaScript库,用于简化网页开发中的DOM操作和事件处理。在jQuery中,有两个常用的方法:text()和html(),它们之间有一些区别。

text()方法用于获取或设置选定元素的文本内容。当使用text()方法获取元素的文本内容时,它会返回元素中的纯文本,即不包含任何HTML标签或其他标记。这意味着text()方法会将所有的HTML标签都去除,只返回纯文本。而当使用text()方法设置元素的文本内容时,它会将传入的文本作为纯文本插入到元素中,不会解析其中的HTML标签。这样可以防止XSS攻击,因为文本中的任何HTML标签都会被当做普通文本显示。

html()方法与text()方法类似,也用于获取或设置选定元素的内容。不同之处在于,html()方法会返回元素的HTML内容,即包含所有的HTML标签和其他标记。当使用html()方法获取元素的内容时,它会返回包含HTML标签的字符串。而当使用html()方法设置元素的内容时,它会将传入的文本作为HTML代码插入到元素中,并解析其中的HTML标签。这样可以动态地改变元素的内容和结构。

对于使用text()方法的案例,假设有一个HTML页面中有一个

标签,其内容为"Hello, World!"。使用以下jQuery代码可以获取并显示该

标签的文本内容:

javascript

var textContent = $("p").text();

console.log(textContent);

这段代码会将

标签的文本内容"Hello, World!"输出到控制台。

对于使用html()方法的案例,假设有一个HTML页面中有一个
标签,其内容为"Hello, World!"。使用以下jQuery代码可以获取并显示该
标签的HTML内容:

javascript

var htmlContent = $("div").html();

console.log(htmlContent);

这段代码会将
标签的HTML内容"Hello, World!"输出到控制台。

- text()方法用于获取或设置元素的纯文本内容,不包含HTML标签。

- html()方法用于获取或设置元素的HTML内容,包含所有的HTML标签和其他标记。

通过使用text()和html()方法,开发者可以灵活地操作网页中的文本内容和HTML结构,实现丰富的交互效果。