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