06-jQuery结点操作

一、jQuery添加结点相关的方法

1. 内部插入

​ append(content|fn)

​ appednTo(content)

​ 会将元素添加到指定元素内部的最后

​ prepend(content|fn)

​ prepend(content)

​ 会将元素添加到指定元素内部的最后

2. 外部插入

​ after(content|fn)

​ insertAfter(content)

​ 会将元素添加到指定元素外部的后面

​ before(content|fn)

​ insertBefore(content)

​ 会将元素添加到指定元素外部的前面

3. 案例代码

               $("button").click(function(){
                   var $li = $("<li>我是新增li</li>");
                   // $('ul').append($li);
                   // $('ul').prepend($li);
                   // $li.appendTo('ul');
                   // $li.prependTo('ul');
   
                   // $('ul').after($li);
                   // $('ul').insertAfter($li);
                   $li.insertBefore('ul');
                   // $li.insertAfter("ul")
                });
   

4. 效果展示

   

二、52-jQuery删除节点相关方法

1. 删除

​ remove(expr) / detach()

​ 删除指定元素

2. empty()

​ 删除指定元素的内容和子元素，指定元素自身不会被删除

3. 案例代码

               $('button').click(function(){
                   // $('div').remove();
                   // $('div').empty();
                   // $("div").detach();
                   $('ul').remove();
               });
           })
   

4. 效果展示

   

三、jQuery替换节点相关方法

1. 替换

​ replaceWith(content|fn) / replaceAll(selector)

​ 替换所有匹配的元素为指定的元素

2. 代码案例

               $("button").click(function(){
                   // 新建一个元素
                   var $h6 = ("<h6>我是标题六</h6>");
                   // 2.替换元素
                   $('h1').replaceWith($h6);
   
               });
   

3. 效果展示

   

三、jQuery复制节点相关操作

1. clone([Even[,deepEven]])

   ​ 如果传入false就是浅复制，如果传入true就是深复制

   ​ 浅复制只会复制元素，不会复制元素的事件

   ​ 深复制会复制元素，也会复制元素的事件

2. 案例代码

                         $("button").eq(0).click(function(){
                   // 浅复制一个元素
                   var $li = $("li:first").clone(false);
                   // 将复制的元素添加到ul中
                   $("ul").append($li);
                   
               });
               $("button").eq(1).click(function(){
                   // 深复制一个元素
                   var $li = $("li:first").clone(true);
                   // 将复制的元素添加到ul中
                   $("ul").append($li);
               });
               $('li').click(function(){
                   alert($(this).html());
               });
   

3. 效果展示

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KvoeI2L3-1593483298000)(https://s1.ax1x.com/2020/06/23/NUXNRg.gif)]](https://imgchr.com/i/NUXNRg)

rt($(this).html());
});

3. 效果展示

[外链图片转存中...(img-KvoeI2L3-1593483298000)]](https://imgchr.com/i/NUXNRg)