html() jquery

html() 方法在 jQuery 中的用法

jQuery 的 html() 方法用于获取或设置元素的 HTML 内容。它可以操作 DOM 元素的内部 HTML，包括标签和文本。

获取元素的 HTML 内容

调用不带参数的 html() 方法可以获取第一个匹配元素的 HTML 内容。例如：

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

设置元素的 HTML 内容

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

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

使用函数动态设置 HTML

html() 方法还支持传入一个函数，用于动态生成 HTML 内容。函数的参数包括当前元素的索引和旧的 HTML 值。例如：

$('div').html(function(index, oldHtml) {
    return oldHtml + '<span>追加的内容</span>';
});

注意事项

• html() 方法会覆盖目标元素内的所有现有内容。
• 与 text() 方法不同，html() 会解析 HTML 标签，而 text() 会将其作为纯文本处理。
• 在获取内容时，html() 仅返回第一个匹配元素的内容，而设置内容时会影响所有匹配元素。

示例代码

以下是一个完整示例，展示如何获取和设置 HTML 内容：

<div id="example">
    <p>原始内容</p>
</div>

<script>
    // 获取 HTML 内容
    var htmlContent = $('#example').html();
    alert(htmlContent); // 显示: <p>原始内容</p>

    // 设置 HTML 内容
    $('#example').html('<h1>新标题</h1><p>更新后的内容</p>');
</script>

与 DOM 方法的对比

在原生 JavaScript 中，等效的功能可以通过 innerHTML 属性实现：

document.getElementById('example').innerHTML = '<p>新内容</p>';

然而，jQuery 的 html() 方法提供了更简洁的语法，并自动处理了跨浏览器兼容性问题。