jquery怎么清空div内容和元素，使用jquery空div的方法介绍及示例

频道：问答日期：2025-04-02 08:13:44 浏览：3

在 jQuery 中，有多种方法可以清空一个 div 元素的内容和子元素。下面为你详细介绍这些方法并给出示例。

1. 使用 empty() 方法

empty() 方法会移除被选元素的所有子节点及内容，但保留该元素本身及其属性。这是清空 div 内容和元素最常用的方法之一。

示例代码如下：

jquery怎么清空div内容和元素，使用jquery空div的方法介绍及示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Empty Div with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div id="myDiv">
        <p>这是一段测试文本。</p>
        <span>这是一个测试 span。</span>
    </div>
    <button id="clearButton">清空 div</button>

    <script>
        $(document).ready(function () {
            $('clearButton').click(function () {
                $('myDiv').empty();
            });
        });
    </script>
</body>

</html>

在上述示例中，当点击“清空 div”按钮时，id 为 myDiv 的 div 元素内的所有子元素（如 p 标签和 span 标签）及其内容都会被移除，但 myDiv 元素本身会保留。

2. 使用 html('') 方法

html() 方法用于设置或返回被选元素的内容（innerHTML）。当传入空字符串作为参数时，它会清空该元素的所有内容和子元素。

示例代码如下：

jquery怎么清空div内容和元素，使用jquery空div的方法介绍及示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Empty Div with jQuery html()</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div id="anotherDiv">
        <h3>测试标题</h3>
        <ul>
            <li>列表项 1</li>
            <li>列表项 2</li>
        </ul>
    </div>
    <button id="clearAnotherButton">清空另一个 div</button>

    <script>
        $(document).ready(function () {
            $('clearAnotherButton').click(function () {
                $('anotherDiv').html('');
            });
        });
    </script>
</body>

</html>

在这个示例中，点击“清空另一个 div”按钮时，id 为 anotherDiv 的 div 元素内的所有内容和子元素都会被清空，只保留 anotherDiv 元素本身。