jQuery使用(五)：DOM操作之插入和删除元素

插入：

• insertBofore()
• before()
• insertAfter()
• after()
• appendTo()
• append()
• prependTo()
• prepen()

删除：

• remove()
• detach()

 

//css
<style type="text/css">
    .wrapper{
        border: 1px solid black;
        width: 200px;
        padding: 10px;
    }
    .wrapper div{
        width: 200px;
        height: 100px;
    }
    .wrapper .box1{
        background: red;
    }
    .wrapper .box2{
        background: orange;
    }
    .content {
        width: 200px;
        height: 50px;
        background: blue;
    }
</style>

//html
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>
<div class="content">content</div>

jQuery插入元素和内容的操作方法

1.1.insertBefore()--把所有匹配的元素插入到另一个、指定的元素元素集合的前面。(执行剪切操作)

$('.content').insertBefore('.box1');
//将'content'插入到'box1'的前面，并且对'content'执行剪切操作

1.2.before()--在匹配的元素前面插入内容。这里的内容包两种含义，一种是将参数以字符串格式直接插入到元素的前面；另一种含义就是，将jQuery对象包裹的节点及其所包含的内容剪切到元素的前面。

参数可以直接写入字符串，jQuery对象，或者方法（方法的返回值作为正式的参数传入函数处理）。

$('.box1').before('.content');//直接将'.content'字符串添加到了box1前面
$('.box1').before( $('.content') );//将'content'插入到'box1'的前面，并且对'content'执行剪切操作

1.3.insertAfter()--与insertBefore()的实现机制一致，insertAfter是将剪切的元素插入到指定的元素的后面。
1.4.after()--与before()的实现机制一致，after是将剪切的元素或者指定的内容插入到匹配的元素的后面。

1.5.append()--将被选内容（元素或数据）插入到指定的元素的末尾（内容机制与before一致，可以直接将参数数据插入到元素的末尾，也可以将jQuery对象包裹的节点剪切到元素的末尾）。

$('.content').appendTo('.wrapper');//将'.content'剪切到'.wrapper'的末尾
$('.wrapper').append( $('.content') );//将'.content'剪切到'.wrapper'的末尾

1.6.prependTo()--在被选元素的开头插入HTML元素。

1.7.prepend()--将被选内容（元素或数据）插入到指定的元素的开头(内容机制与before一致，可以直接将参数数据插入到元素的末尾，也可以是jQuery对象包裹的节点剪切到元素的开头)

jQuery删除元素和内容的操作方法

2.1.remove()--方法用来移除元素，包括福哦呦的文本和子节点，基于链式调用还是会返回这个元素的jQuery对象，但是返回的是一个全新的节点，原来绑定的数据和事件不会被保留。

$('.content').click(function(){
    $('.content').remove().appendTo('body');
    alert(1);
});//重新被添加到body的'.content'的事件不能再次被触发了（alert(1)没有了弹窗效果）

2.2.detach()--与remove()基本一致，都是用来删除元素，但是链式调用机制返回的jQuery对象继续保留了原对象节点的数据和绑定的事件。

$('.content').click(function(){
    $('.content').detach().appendTo('body');
    alert(1);
});//被重新添加到body的'.content'的事件还可以被再次出发

$()--jQuery构造函数与添加节点相关的一个知识点
构造方法的参数可以是html代码(可以带样式和属性)的字符串形式，这个字符串可以被jQuery构造函数解析成真正的DOM结构。

$('<div style="background-color:red;width:100px;height:100px;"></div>').appendTo('body');