jQuery对DOM进行增删改（jQuery实现动态添加html标签、删除html标签、删除html标签）

最新推荐文章于 2023-06-16 15:43:17 发布

Keeling1720

最新推荐文章于 2023-06-16 15:43:17 发布

阅读量380

点赞数

分类专栏： JavaScript JavaWeb

本文链接：https://blog.csdn.net/weixin_44741023/article/details/118364251

版权

JavaWeb 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JavaScript

32 篇文章 3 订阅

订阅专栏

文章目录

jQuery对DOM进行增删改

jQuery对DOM进行增删改

增

增加子标签

A.appendTo(B) ：把A插入到B的最后一个子元素
A.prependTo(B) ：把A插入到B的第一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            $("#append").click(function () {
                $("<input type='checkbox' name='language' value='c#'/>C#<br>").appendTo("#checkboxContainer");
            });

            $("#prepend").click(function () {
                $("<input type='checkbox' name='language' value='javaScript'/>JacaScript<br>").prependTo("#checkboxContainer");
            });
        })
    </script>
</head>
<body>
    您擅长的语言有：<br>
    <div id="checkboxContainer">
        <input type="checkbox" name="language" value="c"/>C<br>
        <input type="checkbox" name="language" value="java"/>Java<br>
        <input type="checkbox" name="language" value="python"/>Python<br>
    </div>
    <button id="append">向最后面加一个C#</button>
    <button id="prepend">向最前面加一个JavaScript</button>
</body>
</html>

在这里插入图片描述
点击两个按钮后：

按F12看现在的源码（成功添加到div中）：

增加兄弟元素

A.insertAfter(B)：在B的后边插入兄弟元素A
A.insertBefore(B)：在B的前面插入兄弟元素A

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            $("#append").click(function () {
                $("<input type='checkbox' name='language' value='c#'/>C#<br>").insertBefore($("input:first"));
            });

            $("#prepend").click(function () {
                $("<input type='checkbox' name='language' value='javaScript'/>JacaScript<br>").insertAfter($("br:last"));
            });
        })
    </script>
</head>
<body>
    您擅长的语言有：<br>
    <input type="checkbox" name="language" value="c"/>C<br>
    <input type="checkbox" name="language" value="java"/>Java<br>
    <input type="checkbox" name="language" value="python"/>Python<br>
    <button id="append">向最后面加一个C#</button>
    <button id="prepend">向最前面加一个JavaScript</button>
</body>
</html>

运行结果：
在这里插入图片描述
点击按钮后：

源码：

为了给路过的人自信心，下边特地不给出源码例子，让路过的亲尽量更多收益（其实就是懒得写，毕竟挺简单的其实，就是常不常用的问题）

改

A.replaceWith(B):用B替换掉A
A.replaceAll(B):用A取代所有的B（每个B都会被一个A取代，也就是如果有10个B的话，那么这10个B会都变成A，且一共会有10个A）

删

A.remove():删除A标签，整个标签的东西，包括子标签和自己都会一并清除
A.empty():清空A标签的内容，标签还在，但只剩下一个标签头尾了，子标签与其他内容都会消失。

举个例子吧：

<div>
	<h1>哈哈哈</h1>
</div>

如果是用

$(“div”).remove();

那么就啥也不剩了。

但是，如果用

$(“div”).empty();

那么还会剩下一具空壳

<div></div>

Keeling1720

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery对DOM进行增删改（jQuery实现动态添加html标签、删除html标签、删除html标签）

文章目录jQuery对DOM进行增删改增增加子标签增加兄弟元素改删jQuery对DOM进行增删改增增加子标签A.appendTo(B) ：把A插入到B的最后一个子元素A.prependTo(B) ：把A插入到B的第一个子元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <
复制链接

扫一扫