jquery .html

jQuery .html() 方法

jQuery 的 .html() 方法用于获取或设置匹配元素的 HTML 内容。以下是其常见用法和注意事项：

获取 HTML 内容

调用不带参数的 .html() 方法会返回第一个匹配元素的 HTML 内容。例如：

var content = $('#element').html();
console.log(content); // 输出元素的内部HTML

设置 HTML 内容

传递一个字符串参数可以设置匹配元素的 HTML 内容。例如：

$('#element').html('<p>新的HTML内容</p>');

这会替换 #element 内的所有内容为新的 HTML。

注意事项

• 如果匹配多个元素，.html() 仅返回第一个元素的 HTML 内容。
• 设置 HTML 时，所有匹配元素的内容都会被替换。
• 使用 .html() 设置内容时，会覆盖原有内容，包括事件监听器（需谨慎）。

与 .text() 的区别

• .html() 处理 HTML 标签（如 <p>），而 .text() 仅处理纯文本（忽略标签）。
• 示例对比：

  $('#element').html('<strong>加粗文本</strong>'); // 渲染为加粗文本
  $('#element').text('<strong>加粗文本</strong>'); // 输出字符串（不渲染标签）

链式操作

.html() 支持链式调用，例如：

$('#container')
  .html('<div>新内容</div>')
  .addClass('updated');

安全性提示

直接插入用户输入的 HTML 可能导致 XSS 攻击。建议对动态内容进行转义或使用 .text() 方法处理不可信数据。