下面是关于jquery增加和删除元素的完整攻略。

增加元素

通过html字符串创建元素

利用jquery的 .html() 和 .append()方法可以快速创建新的元素并追加到文档中。例如：

$("#container").append('<p>hello world!</p>');

上述代码会将一个新的段落元素（

标签）及其内容"hello world!"添加到id为container的元素中。

通过jquery对象创建元素

除了通过html字符串创建元素外，还可以使用jquery的其他方法来构造新的元素，并将它们添加到文档中。例如：

var newParagraph = $("<p/>").html("hello world!");
$("#container").append(newParagraph);

上述代码通过先创建一个jquery对象来构建一个新的段落元素，并将其追加到id为container的元素中。

删除元素

通过选择器删除元素

通过选择器可以选中需要删除的元素，然后调用 .remove() 方法即可删除该元素。例如：

$("#myElement").remove();

上述代码将删除具有 "myElement" id的元素。

通过父元素删除子元素

除了通过选择器删除元素外，还可以通过针对具有父元素的元素的操作来删除某个子元素。例如：

$("#myParentElement").find("#myChildElement").remove();

上述代码将删除具有 "myChildElement" id的元素，该元素是具有 "myParentElement" id的元素的子元素。

示例1：

下面是一个通过html字符串创建元素的示例。我们将用jquery动态创建一个按钮：

<!DOCTYPE html>
<html>
<head>
    <title>Create Element Example</title> 
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="buttonContainer"></div> <!--新按钮的容器-->
    <script>
        //创建新的按钮元素
        var newButton = $("<button/>").html("Click Me!");
        //将新的按钮添加到container元素中
        $("#buttonContainer").append(newButton);
    </script>
</body>
</html>

示例2：

下面是一个通过选择器删除元素的示例。我们将用jquery删除页面上具有 "removeMe" class的元素：

<!DOCTYPE html>
<html>
<head>
    <title>Remove Element Example</title> 
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
        .removeMe {
            background-color: pink;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="removeMe">要删除的元素1</div>
    <div class="removeMe">要删除的元素2</div>
    <div class="removeMe">要删除的元素3</div>
    <button id="removeButton" onclick="removeElements()">删除全部元素</button>
    <script>
        function removeElements() {
            //选中具有 "removeMe" class的元素，并删除
            $(".removeMe").remove();
        }
    </script>
</body>
</html>

以上就是关于jquery增加和删除元素的攻略了。希望可以帮到你！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery增加和删除元素的方法 - Python技术站

jquery增加和删除元素的方法