jQuery html()

概述

html() 方法是 jQuery 对象的一个方法，用于获取或设置 HTML 内容。它可以用于:

• 获取匹配元素的 HTML 内容
• 设置匹配元素的 HTML 内容

用法示例

获取 HTML 内容

$(selector).html();

• selector：要获取 HTML 内容的元素选择器。

这个代码片段将返回一个字符串，表示匹配元素的 HTML 内容。

设置 HTML 内容

$(selector).html(content);

• selector：要设置 HTML 内容的元素选择器。
• content：要设置的 HTML 内容。

这个代码片段将设置匹配元素的 HTML 内容为指定的字符串。

注意事项

• 如果同时有多个匹配元素，只会获取或设置第一个匹配元素的 HTML 内容。
• 如果要获取或设置所有匹配元素的 HTML 内容，可以使用 each() 方法。
• 在设置 HTML 内容时要注意防止 XSS 攻击，最好使用 text() 方法或进行过滤操作。

示例代码

获取 HTML 内容

// 获取 ID 为 "test" 的元素的 HTML 内容
var html_content = $("#test").html();
console.log(html_content); // "<p>这是一段 HTML 内容</p>"

设置 HTML 内容

// 设置 ID 为 "test" 的元素的 HTML 内容为一段新的 HTML
$("#test").html("<p>这是新的 HTML 内容</p>");

防止 XSS 攻击

// 使用 text() 方法设置 ID 为 "test" 的元素的文本内容
var text_content = "<p><script>alert('XSS攻击')</script></p>";
$("#test").text(text_content); // 设置 ID 为 "test" 的元素的文本内容

// 等价于
var safe_content = $("<div>").text(text_content).html(); // 对文本内容进行过滤
$("#test").html(safe_content); // 设置 ID 为 "test" 的元素的 HTML 内容

以上是关于 jQuery html() 方法的介绍，是一个非常常用的 jQuery 方法。当我们需要获取或设置元素的 HTML 内容时，可以使用这个方法。同时，在进行 HTML 内容设置时，要注意防止 XSS 攻击，保证安全性。