JQuery 课时22 jQuery DOM移除、DOM替换

最新推荐文章于 2022-09-27 13:35:11 发布

原创最新推荐文章于 2022-09-27 13:35:11 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了jQuery中用于DOM元素移除和替换的四个主要方法：.detach()用于移除元素但保留其事件和数据；.empty()清除元素内的所有子节点；.remove()彻底删除元素及其绑定；.unwrap()删除匹配元素的父元素。同时，还讲解了替换元素的方法：.replaceAll()将新元素替换目标元素，以及.replaceWith()用新内容替换匹配元素。

JQuery 课时22 jQuery DOM移除、DOM替换

DOM移除
DOM替换
- 1、.replaceAll(),替换每个目标元素
- 2、.replaceWith()，替换所有匹配元素并返回被删除元素的集合

)

DOM移除

在这里插入图片描述

1、.detach() 去掉所有匹配元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <p class="p1">haha</p>
    <p>haha</p>
    <p>haha</p>
<script>
    $(function(){
        // 删除所有p标签
        $(".p1").detach();
    })
</script>
</body>
</html>

在这里插入图片描述

2、.empty():去掉匹配元素的所有子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        .container{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <div>
                <p class="p1">哈哈哈哈</p>
            </div>
        </div>
    </div>
    <p class="p1">haha</p>
    <p>haha</p>
    <p>haha</p>
<script>
    $(function(){
        // 删除。container下的子元素
        $(".container").empty();
        
    })
</script>
</body>
</html>

在这里插入图片描述

3、.remove()，删除元素，并且删除元素上的事件及jquery数据

4、.unwrap()，删除匹配元素的父元素，保留自身

DOM替换

在这里插入图片描述

1、.replaceAll(),替换每个目标元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <div class="contains">
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
    </div>
    <script>
        $(function(){
            $("<span>替换的span</span>").replaceAll($("p"));
        })
    </script>
</body>
</html>