当前位置：首页 > jquery

jquery $().html()

2026-03-17 12:51:09jquery

jQuery `$().html()` 方法

$().html() 是 jQuery 中用于获取或设置 HTML 内容的核心方法。它可以操作匹配元素的内部 HTML，常用于动态修改页面内容。

获取 HTML 内容

调用无参数的 html() 会返回第一个匹配元素的 HTML 内容：

var content = $('#element').html();
// 返回 id="element" 的 DOM 内部 HTML 字符串

设置 HTML 内容

传入字符串参数会替换所有匹配元素的内部内容：

jquery $().html()

$('#element').html('<p>New content</p>');
// 将 id="element" 的内容替换为新的 HTML

使用函数动态设置

可以通过回调函数基于当前内容生成新内容：

$('div').html(function(index, oldHtml) {
  return oldHtml + '<span>Appended</span>';
});
// 为所有 div 元素追加内容

与 `text()` 方法的区别

html() 处理 HTML 标签（<b> 会渲染为加粗文本）
text() 会将内容作为纯文本处理（<b> 会显示为字符串）

安全注意事项

直接使用用户输入作为 html() 参数可能导致 XSS 漏洞：

jquery $().html()

// 危险示例
$('#container').html(userInput); // 可能执行恶意脚本

// 安全方案
$('#container').text(userInput); // 或使用 DOMPurify 等库过滤

性能优化建议

频繁操作 DOM 时建议：

// 批量更新优于循环
var $list = $('#list');
var items = ['a', 'b', 'c'];
$list.html(items.map(item => `<li>${item}</li>`).join(''));

// 使用文档片段
var fragment = document.createDocumentFragment();
items.forEach(item => {
  var li = document.createElement('li');
  li.textContent = item;
  fragment.appendChild(li);
});
$list.empty().append(fragment);

该方法在现代 jQuery 版本（1.8+）中保持稳定，但需注意：