jQuery DOM操作 包裹元素、删除元素、替换元素

jQuery DOM操作 包裹元素、删除元素、替换元素

一、包裹元素

<div class="wrap">
    <span>red</span>
    <span>green</span>
    <span>blue</span>
</div>

1、wrap（‘想要在外层添加元素’）在每个匹配的元素外层包裹上一个html元素

 $('.wrap span').wrap('<li>');
 //在span元素的外层添加一个li元素
 

2、wrapAll（）给选中的所有标签统一添加一个父级

 $('.wrap li').wrapAll('<ul>');
 //选中的所有li标签统一添加一个父级ul
 

3、在元素里包裹上一层标签

$('.wrap span').wrapInner('<strong>');
 //选中的所有li标签分别在里面添加一个元素
 

4、 将元素集合的父级元素删除

$('.wrap li').unwrap();
 //将元素集合的父级元素删除
 

二、删除操作

    <div class="del">
        <div class="title">标题</div>
        <ul>
            <li>red</li>
            <li>green</li>
            <li>blue</li>
        </ul>
        <div class="end">底部</div>
    </div>
    

1、remove（），删除自己

$('.del .title').remove();
//删除已选中的元素
$('div').remove('.title');

2、empty（） 清空子元素

$('.del ul').empty();

3、detach（）删除所有元素

  $('.del .end').click(function(){
        alert(1);
    })
    // var end = $('.del .end').remove();
    var end = $('.del .end').detach();
    setTimeout(function(){
        $('.del').append(end);
    },1000)
//remove()和detach（）区别：remove()删除所有，detach（），删除后还留有事件

三、替换复制

<div class="clone">
        <p>这是克隆</p>
        <h2 class="replaceAll">
            这是主要文字
        </h2>
        <div class="name1">111</div>
        <div class="name2">222</div>
        <h2 class="replaceWidth">这是被动替换</h2>
</div>

1、克隆clone（），参数为true

$('.clone p').clone().appendTo('.clone');

2、replaceAll("想要被替换的元素“）复制，主动生成的标签

$('<h3>使用replaceAll方法主动替换</h3>').replaceAll('.clone .replaceAll')

3、剪切（特殊功能）

$('.clone .name1').replaceAll('.clone .name2');

4、replaceWith()被动替换

$('.clone .replaceWidth').replaceWith('<h3>被动替换</h3>')