当前位置：首页 > jquery

jquery的html

2026-02-03 10:53:38jquery

jQuery 的 html() 方法

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

获取 HTML 内容

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

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

设置 HTML 内容

传递一个字符串参数给 html() 方法会设置所有匹配元素的 HTML 内容。

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

清空 HTML 内容

传递空字符串可以清空元素的 HTML 内容。

$('#element').html('');

使用回调函数

html() 方法还支持传入回调函数，动态设置 HTML 内容。回调函数接收当前元素的索引和旧的 HTML 内容作为参数。

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

注意事项

html() 方法会覆盖元素原有的内容，包括子元素。
如果 jQuery 对象匹配多个元素，设置操作会作用于所有元素，但获取操作仅返回第一个元素的内容。
与 text() 方法不同，html() 会解析 HTML 标签，而 text() 会将内容作为纯文本处理。

示例代码

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

<script>
    // 获取 HTML 内容
    var htmlContent = $('#container').html();
    console.log(htmlContent); // 输出: <p>原始内容</p>

    // 设置 HTML 内容
    $('#container').html('<div>新的内容</div>');

    // 使用回调函数追加内容
    $('#container').html(function(index, oldHtml) {
        return oldHtml + '<span>追加的内容</span>';
    });
</script>

html() 方法是 jQuery 中操作 DOM 内容的核心方法之一，适用于动态更新页面内容或获取元素的 HTML 结构。

jquery的html