对DOM节点进行操作--删除、复制与替换节点

最新推荐文章于 2023-05-02 11:48:46 发布

极客研究者

最新推荐文章于 2023-05-02 11:48:46 发布

阅读量1.3k

点赞数

分类专栏： JQuery 文章标签： jquery js dom

本文链接：https://blog.csdn.net/qq_34550459/article/details/106117353

版权

JQuery 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

删除节点:
方法1：remove([selector]):用于从DOM中删除所有匹配的元素
selector:可选参数,jquery选择器,
不传的话,则删除匹配到的所有元素

该方法删除某个节点之后,该节点所包含的所有后代节点元素也同时被删除
返回值是一个指向已被删除节点的引用,以后还可以继续

方法2:detach([selector]):删除DOM中匹配的元素
selector:可选参数,jquery选择器,
不传的话,则删除匹配到的所有元素
与remove()方法不同的是,这个方法不会吧匹配的元素从jquery对象中删除,
所有绑定的事件和数附加的据都会保留下来

方法3:empty():将节点清空,清空元素中所有的后代节点元素

复制节点:
clone()方法；复制节点
1.不带参数的,复制匹配的DOM元素且选中这些复制的副本
2.带布尔型的参数
参数为true时,表示复制匹配的元素以及所有的事件处理
false时,表示不复制元素的事件处理

替换节点:
replaceAll(selector):
selector：用于查找所要被替换的元素
使用匹配的元素替换掉所有selector匹配到的元素
A.replaceAll(selector):
用A元素替换所有匹配到的元素

replaceWith(content)
content:用于将匹配元素替换掉的内容
将所有的元素替换成指定的HTML或DOM元素
A.replaceWith(B):B替换匹配的A内容

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery之删除、复制与替换节点</title>
    <script src="../../../js/jquery.min.js"></script>
    <script>
        $(function(){
        // $('div p').remove();
        $('div.box1  p').remove("p[title!='testP2']");
       var $p4= $('div.box2 p').detach("p[title!='testP3']");
       $('.box2').append($p4);

       $('div.box3 p').empty();//清空p节点

       //复制节点
       $('#copyElement').on('click',function(){
          var box4Ele=$('div.box4');
           var clonedEle= box4Ele.children().eq(1).clone(true);
           $('.box1').append(clonedEle);
         });

         //替换所有被匹配到的元素
         var $ele=$('<b>Paragraph. </b>');
         $ele.replaceAll('div.replace p');
    
         //替换掉匹配的内容
         var $ele2=$('<b>Love,Love,Love </b>');
         $('div.replace2').replaceWith($ele2);//后面替换前面的
        
        });
    </script>
</head>
<body>
    <button id="copyElement">复制节点</button>
    <div class="box1">
        <p title="testP1">every day!you must cheer up! 1</p>
        <p title="testP2">every day!you must cheer up! 2</p>
    </div>

    <div class="box2">
            <p title="testP3">every day!you must cheer up! 3</p>
            <p title="testP4">every day!you must cheer up! 4</p>
        </div>

        <div class="box3">
                <p title="testP5">every day!you must cheer up! 5</p>
                <p title="testP6">every day!you must cheer up! 6</p>
            </div>


            <div class="box4">
                    <p title="test7">every day!you must cheer up! 7</p>
                    <p title="testP8">every day!you must cheer up! 8</p>
                </div>
            <div class="replace">
                    <p>Hello</p><p>cruel</p><p>World</p>
            </div>
            <div class="replace2">
                    <p>you</p><p>are</p><p>mine!</p>
            </div>
</body>
</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对DOM节点进行操作--删除、复制与替换节点

删除节点:方法1：remove([selector]):用于从DOM中删除所有匹配的元素selector:可选参数,jquery选择器,不传的话,则删除匹配到的所有元素该方法删除某个节点之后,该节点所包含的所有后代节点元素也同时被删除返回值是一个指向已被删除节点的引用,以后还可以继续方法2:detach([selector]):删除DOM中匹配的元素selector:可选参数,jquery选择器,不传的话,则删除匹配到的所有元素与remove()方法不同的是,这个方法不会吧匹配的元素从jq
复制链接

扫一扫