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>

html、css代码

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');