jquery的html

jQuery 的 html() 方法

html() 是 jQuery 中用于获取或设置 HTML 内容的核心方法。它可以读取元素的内部 HTML，也可以动态修改元素的内容。

获取 HTML 内容

语法：
$(selector).html()

示例：

var content = $('#myDiv').html(); 
console.log(content); // 输出 #myDiv 内的所有 HTML

设置 HTML 内容

语法：
$(selector).html(newHTML)

示例：

$('#myDiv').html('<p>新的段落</p>'); 
// 将 #myDiv 的内容替换为 <p>新的段落</p>

链式操作

html() 支持 jQuery 链式调用：

$('#container')
  .html('<h1>标题</h1>')
  .addClass('highlight');

与 text() 的区别

• html() 处理 HTML 标签（保留标签结构）
• text() 仅处理纯文本（转义标签）

示例对比：

$('#div1').html('<b>加粗</b>');  // 显示加粗文本
$('#div2').text('<b>加粗</b>');  // 显示 "<b>加粗</b>" 字符串

回调函数用法

支持通过函数动态生成内容：

$('li').html(function(index, oldHtml) {
  return oldHtml + ' (' + index + ')';
});

注意事项

1. 对空集合调用返回 undefined
2. 设置内容时会清空原有内容及事件处理程序
3. 需防范 XSS 攻击（避免直接插入用户输入）

性能优化建议

• 批量操作时使用文档片段
• 复杂内容建议使用模板引擎

示例：

var items = ['a', 'b', 'c'];
var html = '';
$.each(items, function(i, val) {
  html += '<li>' + val + '</li>';
});
$('#list').html(html);