4、JQuery——DOM节点删除、复制和拷贝

最新推荐文章于 2026-02-25 07:00:00 发布
原创 最新推荐文章于 2026-02-25 07:00:00 发布 · 2k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
JQuery学习笔记

当前文章被收录于：

JQuery学习笔记
4 篇文章 0 人学习
订阅专栏 查看详情
本文详细介绍了JQuery中DOM节点的删除操作，包括.empty(), .remove()和.detach()方法，以及DOM复制的.clone()方法，还讲解了替换方法.replaceWith()和.replaceAll()以及包裹方法wrap(), unwrap(), wrapAll()和wrapInner()的使用场景和示例。" 85325890,1104471,解决Android Studio indexing卡顿问题,"['Android开发', 'IDE问题', 'Android Studio故障排除', '代码编辑器']

JQuery——DOM节点删除、复制和拷贝

DOM节点删除

.empty()方法
  • 移除指定元素中的所有子节点，同样移除元素的文本
  • 清空所有元素中后代节点，不删除自己本身
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    div {
        background: #bbffaa;
        width: 300px;
    }
    </style>
</head>
<body>
    <h2>通过empty移除元素</h2>
    <div id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on('click', function() {
        //通过empty移除了当前div元素下的所有p元素
        //但是本身id=test的div元素没有被删除
        $("#test").empty()
    })
    </script>
</body>
</html>
.remove()方法

remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的JQuery数据（自带事件销毁方法，防止内存泄露）

  • 该节点与该节点所包含的所有后代节点将同时被删除
  • 提供传递一个筛选的表达式，删除指定合集中的元素
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }

    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通过jQuery remove方法移除元素</h2>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>通过点击jQuery的empty移除元素</button>
    <button>通过点击jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on('click', function() {
        //删除整个 class=test1的div节点
        $(".test1").remove()
    })

    $("button:last").on('click', function() {
        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理
        //带参数的remove
        $("p").remove(":contains('3')")
    })
    </script>
</body>
</html>
.detach()保留数据的删除操作

$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style type="text/css">
    p {
        color: red;
    }
    </style>
</head>

<body>
    <p>P元素1，默认给绑定一个点击事件</p>
    <p>P元素2，默认给绑定一个点击事件</p>
    <button id="bt1">点击删除 p 元素</button>
    <button id="bt2">点击移动 p 元素</button>
    <script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //通过detach方法删除元素
        //只是页面不可见，但是这个节点还是保存在内存中
        //数据与事件都不会丢失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到页面中
        //事件还是存在
        $("body").append(p);
    });
    </script>
</body>

</html>

DOM复制与替换

拷贝clone()

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

注：
如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

常用部分如下：

HTML部分
<div></div>

JavaScript部分
$("div").on('click', function() {//执行操作})

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }

    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    </style>
</head>

<body>
    <h2>通过clone克隆元素</h2>
    <div class="left">
        <div class="aaron1">点击,clone浅拷贝</div>
        <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
    </div>
    <script type="text/javascript">
        //只克隆节点
        //不克隆事件
        $(".aaron1").on('click', function() {
            $(".left").append( $(this).clone().css('color','red') )
        })
    </script>

    <script type="text/javascript">
        //克隆节点
        //克隆事件
        $(".aaron2").on('click', function() {
            console.log(1)
            $(".left").append( $(this).clone(true).css('color','blue') )
        })
    </script>
</body>

</html>
替换方法：replaceWith（），replaceAll（）

replaceWith（），replaceAll（）都是替换的意思，只是两者替换内容和位置不一样

//replaceWith（）
$("p:eq(1)").replaceWith('<astyle="color:red">替换第二段的内容</a>')

//replaceAll（）
$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>

    .right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>replaceWith()和replaceAll()</h2>
    <div class="left">
        <button class="bt1">点击,通过replaceWith替换内容</button>
        <button class="bt2">点击,通过rreplaceAll替换内容</button>
    </div>
    <div class="right">
        <div>
            <p>第一段</p>
            <p>第二段</p>
            <p>第三段</p>
        </div>
        <div>
            <p>第四段</p>
            <p>第五段</p>
            <p>第六段</p>
        </div>
    </div>
    <script type="text/javascript">
    //只克隆节点
    //不克隆事件
    $(".bt1").on('click', function() {
        //找到内容为第二段的p元素
        //通过replaceWith删除并替换这个节点
        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
    })
    </script>
    <script type="text/javascript">
    //找到内容为第六段的p元素
    //通过replaceAll删除并替换这个节点
    $(".bt2").on('click', function() {
        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
    })
    </script>
</body>

</html>

包裹方法

wrap()

在集合中匹配的每个元素周围包裹一个HTML结构
如：

//给p元素增加一个div包裹
<p>p元素</p>
$('p').wrap('<div></div>')

例子：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left div,
    .right div {
        width: 100px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }

    .right div {
        background: yellow;
    }

    p {
        border: 1px solid red;
    }

    a {
        border: 1px solid blue;
    }
    </style>
</head>

<body>
    <h2>DOM包裹wrap()方法</h2>
    <div class="left">
        <button class="aaron1">点击,通过wrap方法给p元素增加父容器div</button>
        <button class="aaron2">点击,通过wrap的回调方法给a元素增加父容器div</div>
    </div>
    <div class="right">
        <p>p元素</p>
        <p>p元素</p>
    </div>
    <div class="left">
        <a>a元素</a>
        <a>a元素</a>
    </div>
    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //给所有p元素，增加父容器div
        $('p').wrap('<div></div>')
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        $('a').wrap(function() {
            return '<div class="' + $(this).text() + '" />';
        })
    })
    </script>
</body>

</html>
unwrap()方法

与wrap方法相反，将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

<div>
    <p>p元素</p>
</div>
$('p').unwrap();

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>
    .left,
    .right {
        width: 250px;
        height: 120px;
    }

    .left div,
    .right div {
        width: 100px;
        height: 120px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }

    .right div {
        background: yellow;
    }
    p {
        border: 1px solid red;
    }

    a {
        border: 1px solid blue;
    }
    </style>
</head>


<body>
    <h2>DOM包裹unwrap()方法</h2>
    <div class="left">
        <div class="aaron1">点击,通过unwrap方法给p元素删除父容器div</div>
        <div class="aaron2">点击,通过unwrap的回调方法给a元素删除父容器div</div>
    </div>
    <div class="right">
        <div>
            <p>p元素</p>
        </div>
        <div>
            <p>p元素</p>
        </div>
    </div>
    <div class="left">
        <div>
            <a>a元素</a>
        </div>
        <div>
            <a>a元素</a>
        </div>
    </div>
    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //找到所有p元素，删除父容器div
        $('p').unwrap('<div></div>')
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        //找到所有p元素，删除父容器div
        $('a').unwrap(function() {
            return '<div></div>';
        })
    })
    </script>
</body>

</html>
wrapAll()

给 集合 中匹配的元素增加一个外面包裹HTML结构

如下例子：

//给所有p元素增加div
<p>p元素</p>
<p>p元素</p>
$('p').wrapAll('<div></div>')
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>
    .left,
    .right {
        width: 250px;
        height: 120px;
    }

    .left div,
    .right div {
        width: 100px;
        /*height: 120px;*/
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }

    .right div {
        background: yellow;
    }

    p {
        border: 1px solid red;
    }

    a {
        border: 1px solid blue;
    }
    </style>
</head>

<body>
    <h2>DOM包裹wrapAll()方法</h2>
    <div class="left">
        <div class="aaron1">点击,通过wrapAll方法给所有P元素增加父容器div</div>
        <div class="aaron2">点击,通过wrapAll的回调方法给每个a元素增加父容器div</div>
    </div>
    <div class="right">
        <p>p元素</p>
        <p>p元素</p>
    </div>
    <div class="left">
        <a>a元素</a>
        <a>a元素</a>
    </div>
    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //给所有p元素，增加父容器div
        $('p').wrapAll('<div></div>');
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        //wrapAll接受一个回调函数
        //每一次遍历this都指向了合集中每一个a元素
        $('a').wrapAll(function() {
            return '<div></div>'
        })
    })
    </script>
</body>

</html>
wrapInner（）方法

给集合中匹配的元素的内部，增加包裹的HTML结构

如下例子：

//给所有元素增加一个p包裹
<div>p元素</div>
<div>p元素</div>
$('div').wrapInner('<p></p>')
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>
    .left,
    .right {
        width: 250px;
        height: 130px;
    }

    .left div,
    .right div {
        width: 100px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }

    .right div {
        background: yellow;
    }
    p {
        border: 1px solid red;
    }

    a {
        border: 1px solid blue;
    }
    </style>
</head>


<body>
    <h2>DOM包裹wrapInner()方法</h2>
    <div class="left">
        <div class="aaron1">点击,通过wrapInner方法给所有div元素增加内部父容器p</div>
        <div class="aaron2">点击,通过wrapInner的回调方法给每个div元素增加内部父容器a</div>
    </div>
    <div class="right">
        <div class="right1">p元素</div>
        <div class="right1">p元素</div>
    </div>
    <div class="left">
        <div class="left1">a元素</div>
        <div class="left1">a元素</div>
    </div>


    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //给所有class=right1的div元素，增加内部包裹父容器p
       $('.right1').wrapInner('<p></p>');
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        //wrapInner接受一个回调函数
        //每一次遍历this都指向了合集中每一个class=left1的div元素
        $('.left1').wrapInner(function() {
            return '<a></a>'
        })
    })
    </script>
</body>

v</html>
标签
#jquery
jQuery中的DOM操作
杨欢博的博客
07-12 222
一、创建节点 1. 创建空节点 var $li=$("<li></li>") 2. 创建带文本的节点 var $li=$("<li>文本</li>") var $li=$("<li title='text'>文本</li>") 二、插入节点 1. append: 插入子节点至父元素末尾 $("ul").append($li) 2. prepend: 插入子节点至父元素开头 $("ul").prepend($li) 3. inse
jQuery DOM节点的复制、替换
weixin_34289744的博客
08-13 208
拷贝clone() 克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆 .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个...
jquery直接复制dom内容
qq_28240551的博客
05-23 1475
var obj = $().clone;-----------复制的内容一定是jq对象或对象集合的形式，同时可以直接对属性进行操作 例如attr("val",1);obj .appendto("#xxx"):将复制的jq对象直接添加到指定位置。还可以使用insertAfter的方式...
【jQuery学习笔记---------DOM操作复制元素】
Will 的专栏
04-18 1978
DOM操作复制元素 jQuery定义了clone()方法用来复制节点，与之对应DOM定义了cloneNode()方法实现相同的操作功能。 jQuery实现 jQuery的clone方法能够复制匹配的DOM元素并且选中这些复制的副本。在下面的示例中，当单击段落文本时，页面将复制div元素及其包含的所有属性和子节点，然后将它们添加到div元素的后面，如下：     段落文本 $(fu
jQuery中的DOM克隆
m0_48180834的博客
08-02 521
DOM克隆 例如： function myfun(){ console.log('dom克隆'); } $(function(){ // 选择目标节点 // $('.parent').empty; $('.child:last-child').click(myfun); $('.child:last-child').clon...
jQuery DOM节点
mayuxin1234的博客
11-29 381
1、DOM节点的创建 （1）DOM节点的创建 创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild （2）jQuery节点的创建与属性的处理 创建元素节点 $("") 创建文本节点 $("我是文本节点") 创建属性节点 $("我是属性节点") 2、DOM节点的插入
jQuery基础(二、DOM篇)
qq_14962167的博客
11-04 1178
DOM节点创建 通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。 如果我们通过AJAX获取到数据之后然后才能确定结构的话，这种情况就需要动态的处理节点了。 这里主要介绍的是使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创建div节点元素的样式等两大部
DOM节点的复制与替换
leejj_520的博客
04-07 739
1. DOM拷贝clone() 克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆。 .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆
DOM节点的复制和替换（jQuery）
weixin_30381793的博客
12-10 211
1DOM拷贝clone() 克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆 .clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅...
JQurey的DOM操作
m724318546的博客
08-11 235
jquery的DOM操作（创建节点、插入节点、删除节点、复制节点、替换节点、包裹节点） 1、创建DOM节点 　　1、创建节点 document.createElement 　　2、添加节点的一些属性 setAttribute innerHTML 　　3、加入到文档中 appendChild 2、jquery节点创建与属性的处理 　　通过$()函数处理 $ (‘html结构’) 　　$ ("< div class=‘right’>动态创建DIV元素节点</ div>") 3、DOM内
jquery的DOM操作（创建节点、插入节点、删除节点、复制节点、替换节点、包裹节点）...
weixin_30810583的博客
06-22 531
　　1、创建DOM节点 　　1、创建节点 document.createElement 　　2、添加节点的一些属性 setAttribute innerHTML 　　3、加入到文档中 appendChild 2、jquery节点创建与属性的处理 　　通过$()函数处理，$('html结构') 　　$("<div class='right'>动态创建DIV元素节点&...
jquery基础篇(三)— —DOM和事件
theScoreONE的博客
03-23 698
(一)、DOM节点创建 一、Js流程中涉及的一点方法：  1、创建元素：document.createElement  2、设置属性：setAttribute  3、添加文本：innerHTML  4、加入文档：appendChild 二、jQuery节点创建与属性的处理：  1、创建元素节点：$(“html结构”) 如：$("<div></div>") 2、创建为本节点：$("
Jquery事件操作 对文档的操作 属性选择器使用
qq_37171379的博客
04-12 260
① dom1级事件设置 <input type=”text” ”过程性代码” value=’tom’ /> <input type=”text” ”函数()” /> itnode.onclick = function(){} itnode.onclick = 函数; ② dom2级事件设置 itnode.addEventListener(类型，处理，事件流); it...
jQuery的DOM操作
m0_58679504的博客
07-20 118
内部插入(append()、appendTo()、prepend()、prependTo())、外部插入(after()、before()、insertAfter、insertBefore)、包裹(wrap()、unwrap()、wrapAll、wrapInner())、替换(replaceWith、replaceAll())、删除(remove())、复制(clone())
JavaScript和jQuery中的方法整理
weixin_30256505的博客
04-23 99
一、属性操作 // JavaScript：　　Dom.hasAttribute('attrName'); //是否有指定属性　　Dom.hasAttributes(); //是否有属性 　　Dom.getAttribute('key') //获取属性 　　Dom.setAttribute('key','value') ...
jQuery_DOM操作
Mr_HuangJW的博客
12-20 525
1.append()与appendTo() 两者反向 2.创建标签 直接写即可，如： $('通过appendTo方法添加的元素').appendTo($(".content"))； 3.在兄弟节点前后插入 .after()与.before()，insertAfter()与insertBefore()方向不同。 注：insertAfter()与insertBefore()不支持多参数操
jQuery方法总结
Auroraone的博客
06-21 299
1.dom节点创建与属性处理 $("html结构"); $("&lt;div class='create'&gt;动态创建div元素节点&lt;/div&gt;");2.dom节点的插入 //dom内部插入 $(".div1").append();//向每个匹配的元素内部追加内容 $(...
JQuery学习文档（三）
最新发布
2401_83227843的博客
02-25 1376
本部分系统讲解了jQuery的DOM节点增删改查、结构包裹、属性样式操作及尺寸计算，并深入剖析了内部数据缓存机制的原理与注意事项。
Jquery
csdn_nevermore的博客
02-01 847
jquery基础语法笔记
DOM——拷贝.clone()与替换.replaceWith() 和.replaceAll()及包裹.wrap()
weixin_33922672的博客
11-12 306
拷贝.clone()与替换.replaceWith() 和.replaceAll()及包裹.wrap() 1 .clone()深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素和文字节点 2 如果节点有事件或者数据之类的其他处理，需要通过clone（ture)传递一个布尔值ture来指定，不仅克隆单纯的节点结构，还把附带...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值