当前位置：首页 > jquery

jquery html

2026-03-17 12:49:37jquery

jQuery HTML 操作

jQuery 提供了多种方法来操作 HTML 元素，包括获取和设置元素内容、属性、样式等。以下是常见的 jQuery HTML 操作方法：

获取和设置 HTML 内容

使用 html() 方法可以获取或设置元素的 HTML 内容。

// 获取元素的 HTML 内容
var content = $("#element").html();

// 设置元素的 HTML 内容
$("#element").html("<p>新的 HTML 内容</p>");

获取和设置文本内容

使用 text() 方法可以获取或设置元素的纯文本内容。

// 获取元素的文本内容
var text = $("#element").text();

// 设置元素的文本内容
$("#element").text("新的文本内容");

获取和设置属性

使用 attr() 方法可以获取或设置元素的属性值。

jquery html

// 获取元素的属性值
var href = $("#link").attr("href");

// 设置元素的属性值
$("#link").attr("href", "https://example.com");

添加和移除类

使用 addClass() 和 removeClass() 方法可以添加或移除元素的类。

// 添加类
$("#element").addClass("active");

// 移除类
$("#element").removeClass("active");

插入 HTML 内容

使用 append()、prepend()、after() 和 before() 方法可以在元素内部或外部插入 HTML 内容。

// 在元素内部末尾插入内容
$("#element").append("<p>插入的内容</p>");

// 在元素内部开头插入内容
$("#element").prepend("<p>插入的内容</p>");

// 在元素之后插入内容
$("#element").after("<p>插入的内容</p>");

// 在元素之前插入内容
$("#element").before("<p>插入的内容</p>");

移除元素

使用 remove() 方法可以移除元素。

jquery html

// 移除元素
$("#element").remove();

替换元素

使用 replaceWith() 方法可以替换元素。

// 替换元素
$("#element").replaceWith("<div>新的元素</div>");

克隆元素

使用 clone() 方法可以克隆元素。

// 克隆元素
var clonedElement = $("#element").clone();

示例代码

以下是一个完整的示例，展示如何使用 jQuery 操作 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery HTML 操作示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="container">
        <p id="text">原始文本</p>
        <a id="link" href="#">链接</a>
    </div>

    <script>
        // 修改 HTML 内容
        $("#text").html("<strong>加粗文本</strong>");

        // 修改文本内容
        $("#text").text("新的文本内容");

        // 修改属性
        $("#link").attr("href", "https://example.com");

        // 添加类
        $("#text").addClass("highlight");

        // 插入内容
        $("#container").append("<p>新插入的段落</p>");

        // 移除元素
        $("#link").remove();
    </script>
</body>
</html>

注意事项

使用 jQuery 操作 HTML 时，确保 DOM 已完全加载。可以将代码放在 $(document).ready() 或简写的 $(function() { ... }) 中。
频繁操作 DOM 可能会影响性能，建议尽量减少 DOM 操作次数。
使用 html() 方法时，注意防范 XSS 攻击，避免直接插入用户输入的未经处理的内容。