jQuery中DOM 的增删改

最新推荐文章于 2023-07-16 20:05:13 发布

少年西西

最新推荐文章于 2023-07-16 20:05:13 发布

阅读量185

点赞数

分类专栏： D_JavaWeb阶段 # D4_jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_45554909/article/details/111598016

版权

D_JavaWeb阶段同时被 2 个专栏收录

104 篇文章 2 订阅

订阅专栏

D4_jQuery

11 篇文章 0 订阅

订阅专栏

内部插入：
appendTo()： a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
prependTo()： a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素

外部插入：
insertAfter()： a.insertAfter(b) 得到 ba
insertBefore()： a.insertBefore(b) 得到 ab

替换:
replaceWith()： a.replaceWith(b) 用 b 替换掉
a replaceAll()： a.replaceAll(b) 用 a 替换掉所有 b

删除：
remove()： a.remove(); 删除 a 标签
empty()： a.empty(); 清空 a 标签里的内

内部插入：

appendTo()

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function () {
        $("<h1>标题1</h1>").appendTo($("#span1"));
    });
</script>
<body>
<div id="div1">我是div标签<br/>
    <span id="span1">div中的span对象</span>
</div>
<div id="div">我是div标签,id为div的标签</div>
</body>

在这里插入图片描述

prependTo()

$("<h1>标题1</h1>").prependTo($("#div1"));

在这里插入图片描述

外部插入：

insertAfter()

$("<h1>标题1</h1>").insertAfter($("#div1"));

在这里插入图片描述
insertBefore()

$("<h1>标题1</h1>").insertBefore($("#div1"));

在这里插入图片描述

替换:

replaceWith()： a.replaceWith(b) 用 b 替换掉

$("div").replaceWith($("<h1>标题1</h1>"));

在这里插入图片描述
a replaceAll()： a.replaceAll(b) 用 a 替换掉所有 b

$("<h1>标题1</h1>").replaceAll($("#div1"));

在这里插入图片描述

删除：

remove()： a.remove(); 删除 a 标签

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

在这里插入图片描述
empty()： a.empty(); 清空 a 标签里的内容

$("#div1").empty();

在这里插入图片描述

少年西西

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中DOM 的增删改

内部插入：appendTo()： a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素prependTo()： a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素外部插入：insertAfter()： a.insertAfter(b) 得到 bainsertBefore()： a.insertBefore(b) 得到 ab替换:replaceWith()： a.replaceWith(b) 用 b 替换掉a replaceAll()：
复制链接

扫一扫