jQuery——18——节点的添加，删除，替换，复制

最新推荐文章于 2021-01-14 14:30:29 发布
最新推荐文章于 2021-01-14 14:30:29 发布
阅读量253 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1037490413/article/details/102788981
版权

一：节点的添加

 

<!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>Document</title>
    <style>
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $('button').click(function () {
                //创建一个节点
                var $li = $('<li>新增的li</li>'); //放字符串里，会创建li节点
                /*内部插入*/
                //    $('ul').append($li);
                // $li.appendTo('ul');
                // $('ul').prepend($li);
                // $li.prependTo('ul');

              /*外部插入*/
            //   $('ul').after($li);
                $li.insertAfter('ul');
                // $('ul').before($li);
                // $li.insertBefore('ul');
            })


        });
    </script>
</head>

<body>
    <button>添加节点</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>
    <div>我是div</div>
</body>

</html>

 

二：节点的删除

删除

<!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>Document</title>
    <style>
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $('button').click(function () {
            // $('div').remove();
            // $('li').remove('.item');
            // $('div').detach();
            // $('li').detach('.item');
            $('div').empty();

            });
        });
    </script>
</head>

<body>
    <button>删除节点</button>
    <ul>
        <li class="item">我是第1个li</li>
        <li>我是第2个li</li>
        <li class="item">我是第3个li</li>
        <li>我是第4个li</li>
        <li class="item">我是第5个li</li>
    </ul>
    <div>我是div
     <p>我是段落</p>
    </div>
</body>

</html>

 

三：节点替换 

替换

<!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>Document</title>
    <style>
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $('button').click(function(){
               //创建节点
           var $p=$('<p>我是段落</p>');
        //    $('li').replaceWith($p);   
          $p.replaceAll('span');   
            })
             
        });
    </script>
</head>

<body>
    <button>替换节点</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>
    <span>我是标签</span>
</body>

</html>

 

四：复制节点 

如果传入false则是浅复制，浅复制只复制元素

如果传入true则是深复制，深复制不仅会复制元素，还会复制元素的事件

<!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>Document</title>
    <style>
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
          
          $('button').eq(0).click(function(){
              var $li=$('li:first').clone(false);
              $('ul').append($li);
          })
          $('button').eq(1).click(function(){
            var $li=$('li:first').clone(true);
              $('ul').append($li);
          })
             $('li').click(function(){
                 alert($(this).html());
             })
        });
    </script>
</head>

<body>
    <button>浅复制</button>
    <button>深复制</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>
</body>

</html>

 

野生小米椒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 插件学习（四）
10-27
当我们向`jQuery.fn`或`jQuery.prototype`添加新的方法时，实际上是在扩展jQuery对象的原型，使得所有jQuery实例都可以访问到这个新方法。 `jQuery.fn.extend()`方法是用来合并对象的，它可以将一个或多个对象的...
jquery删除，添加，替换，复制节点的几种常用方法
Warren技术宅的专栏
11-07 1602
//几种添加节点的方法      //$("p").append("你好吗？");//向p元素中追加《b》      //$("你好吗？").appendTo("p");//将《b》追加到p元素中      //$("p").prepend("你好吗？");//向p中前置《b》      //$("你好吗？").prependTo("p");//将《b》前置到p元素中      //$(
【jQuery笔记Part4】01-jQuery-节点操作-添加节点-删除节点-复制节点
萌宅鹿的技术小屋
08-27 447
节点操作添加节点静态页面内部添加（父子关系）append(): 添加节点->追加到最后 (父子关系)appendTo(): 把创建的节点添加到指定节点之后(父子关系)prepend() 添加结点->追加到最前面 (父子关系)prependTo() 把创建的结点添加到指定结点之前(父子关系)外部添加（兄弟关系）after() 把指定结点添加到指定元素之后(属于兄弟关系)insertAft...
利用JQuery对节点进行增加、删除、复制、替换
weixin_48732879的博客
11-18 375
<body> <button>添加节点</button> <div> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> </ul> </div> </body> JQuery.js $("button").click(func.
jQuery:插入,复制,替换和删除节点
网络剑客
03-14 722
jQuery插入,复制、替换和删除节点 $(document).ready(function(){ //几种添加节点的方法 //$("p").append("你好吗？");//向p元素中追加《b》 //$("你好吗？").appendTo("p");//将《b》追加到p元素中 //$("p").prepend("你好吗？");//向p中前置
JQuery 动态XML字符串添加节点
码农飞哥
12-07 2474
今天实现了动态的给一个XML字符串添加节点。 实现如下： 1.首先加XML字符串放置在textarea 域 &lt;textarea rows="30" cols="65" name="xml" id="xml" style="display:none;"&gt; &lt;?xml version="1.0" encoding="
Learning jQuery - Fourth Edition
11-14
- 内容操作：包括添加、删除或替换DOM节点的方法。 - 事件处理：学习如何绑定事件处理器以及触发事件。 **2. 增强网页交互性：** - 动画效果：实现平滑过渡和动画效果，增强用户体验。 - 对话框：创建模态对话框和...
jQuery权威指南-源代码
11-11
3.6　替换节点/68 3.7　包裹节点/69 3.8　遍历元素/71 3.9　删除元素/73 3.10　综合案例分析—数据删除和图片预览在项目中的应用/75 3.10.1　需求分析/75 3.10.2　效果界面/75 3.10.3　功能实现/77 3.10.4　代码分析...
锋利的jQuery_高清_书签.part2
03-12
3.2.5 复制节点 3.2.6 替换节点 3.2.7 包裹节点 3.2.8 属性操作 3.2.9 样式操作 3.2.10 设置和获取HTML、文本和值 3.2.11 遍历节点 3.2.12 CSS—DOM操作 3.3 案例研究——某网站的超链接和图片提示效果 3.4 小结 第4...
jQuery+Asp.net 操作XML文件添加、编辑、删除节点源码例子
09-01
jQuery+Asp.net 操作XML文件添加、编辑、删除节点源码例子
遍历xml删选_jQuery实现遍历XML节点和属性的方法示例
weixin_35012177的博客
01-14 178
本文实例讲述了jQuery实现遍历XML节点和属性的方法。分享给大家供大家参考，具体如下：用jquery遍历xml网上已经有很多, 但是看了好多文章, 对于不指定属性名称的遍历方法却没有研究了一下, 好像jquery没有attributes. 还是要借助于原生态的JS以下是JS代码//用于缩进, 根据节点级别var M_DOT = 1;//递归函数, 用于遍历XML, 同时打印出来function...
jquery的三种删除节点的方法
王凯凯凯凯的前端之路
04-14 4871
1、remove() 当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。 2、detach() detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与re
jQuery_删除及清空节点
Anonymous
01-09 1万+
•remove():从 DOM中删除所有匹配的元素,传入的参数用于根据 jQuery 表达式来筛选元素.  当某个节点用remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用. •empty():清空节点 –清空元素中的所有后代节点(不包含属性节点). Untitled Document
jquery dom 文档对象操作，插入，删除，克隆，替换
boss_way的博客
11-01 545
1． 文档处理 1.1． 插入操作     内部插入是插入子元素 外部插入是插入同级元素 Append（）；添加到指定的最后面 Prepend（）；插入到指定标签的前面 Before（）： 在。。之前插入 Agter（）：在...之后插入     1.2． 删除     Empty：将当前的元素下的所有子元素删除 Remove和detach功能都是删除（detach
js怎样添加、移除、移动、复制、创建和查找节点
IT1125275074的博客
03-10 592
（1）创建新节点 var para=document.createElement("p"); //创建新的 <p> 元素 var node=document.createTextNode("这是新段落。"); //创建了一个文本节点 para.appendChild(node); //向 <p> 元素追加这个文本节点 var element...
jQuery删除节点信息时异常，删除不成功
独骥马车
11-18 244
使用jquery的remove 时删除信息异常：自己的合适的处理方法如下——    var $columns = $(bannerHtml).find("[id^='column']");      for(var i=0;i&lt;$columns.length;i++){     wColumnXml($columns[i]);  } function wColumnXml(){   va...
DOM操作——怎样添加、移除、移动、复制、创建和查找节点
热门推荐
qi1271199790的博客
12-25 2万+
（1）创建新节点       createDocumentFragment()    //创建一个DOM片段       createElement()   //创建一个具体的元素       createTextNode()   //创建一个文本节点 （2）添加、移除、替换、插入       appendChild()       removeChild()
jQuery操作样式、动画、节点操作
qq_38105960的博客
08-20 224
jQuery操作样式 1、样式属性操作 .css() 作用：设置或获取元素的样式属性值 ①设置单个样式：$(selector).css("color", "red"); ②设置多个样式：$(selector).css({"color": "red", "font-size": "30px"}) var cssStyle = {"color": "red", "font-size": "30px...
js table 生成序号_jQuery——动态给表格添加序号
最新发布
05-26
可以使用 jQuery 来给表格添加序号。可以通过以下步骤来实现： 1. 在表格中添加一个新的列，用于显示序号。 2. 使用 jQuery 遍历表格中的每一行，为每一行添加序号。 下面是一个示例代码： ```html 姓名 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值