摘要：在匹配元素集合中的每個(gè)元素后面插入?yún)?shù)所指定的內(nèi)容，作為其兄弟節(jié)點(diǎn)。當(dāng)需要移走一個(gè)元素，不久又將該元素插入時(shí)，這種方法很有用。實(shí)例從中移除集合中匹配元素的所有子節(jié)點(diǎn)。

本次使用的html,css還是我上一篇的源代碼，詳情請看上一篇文章

插入子元素：append,prepend ,appendTo,prependTo

封裝包裹元素：wrap,wrapAll,wrapInner

插入兄弟元素：after,before,insertAfter,insertBefore

替換元素：replaceWith,replaceAll

刪除元素：remove,deatch,unwrap,empty

通常在把新元素插入到DOM中的目標(biāo)位置之前，要先創(chuàng)建一個(gè)新元素才能將它插入到指定位置

使用$創(chuàng)建元素
$(
![](rose.png)
)

克隆元素，使用clone方法以已有的元素為模子生成新的元素，這個(gè)在后面的插入元素起到關(guān)鍵作用，如果在要引用html中的一個(gè)標(biāo)簽內(nèi)容的話，不使用clone方法，那么就會(huì)將這段內(nèi)容移動(dòng)，因此這里使用clone會(huì)很方便，詳細(xì)請看append的用法實(shí)例
實(shí)例：

    $("div.dcell").clone();    //這里的clone方法必須是JQuery對象調(diào)用

DOM API是用js操作的，其實(shí)jquery在幕后悄悄的調(diào)用DOM API
實(shí)例：

     var divElem=document.createElement("div");    //創(chuàng)建一個(gè)div元素
     divElem.classList.add("dcell");       //為div添加class=dcell

    var imgElem=document.createElement("img");
    imgElem.src="lily.png";

    divElem.appendChild(imgElem);   //在新創(chuàng)建的元素后面插入img

    var newElem=$(divElem);

    newElem.each(function (index,elem) {
        console.log(elem.tagName+"    "+elem.className);

    });

把參數(shù)指定的元素插入到所有的JQuery內(nèi)含元素內(nèi)容末尾成為他們的最后一個(gè)子元素，形式有append(html),append(Jquery),append(HTMLElements[])，append(function())
實(shí)例：

//這里使用append元素創(chuàng)建了一個(gè)div元素，在末尾插入元素成為div的子元素
//
    var orchildElems = $("
").append("![](orchid.png)")
        .append("Orchild:")
        .append("");

    var newElems = $("
").append("![](lily.png)")
        .append("Lily:")
        .append("")
        .css("border", "thick double red");
        
    $("div.drow").append(orchildElems);   //在末尾插入數(shù)據(jù)，這里的參數(shù)是jquery對象
    
    
    $("div.drow").append(function(index,elem){
    
    if(elem.id=="row1")
        return orchildElems;
    
    else if(this.id="row2")
        return newElems;
    })
    
    
    $("div.drow").last().append(orchildElem,newElems);   //在其中添加兩個(gè)參數(shù)，插入的先后按照參數(shù)的先后位置，當(dāng)然其中的參數(shù)個(gè)數(shù)沒有限制
    
    
    
        

和append完全相反,向當(dāng)前元素的前面插入html節(jié)點(diǎn)作為當(dāng)前元素的子元素,形式有prepen d(Jquery),prepend(html),prepend(htmlElemnts[]),prepend(function())
實(shí)例：

      var orchildElems = $("
").append("![](orchid.png)")
        .append("Orchild:")
        .append("");
    $("div.dcell").prepend(orchildElems);    //將orchildElems插入到div.dcell的最前面，作為他的子元素
    
    
    $("div.dcell").prepend("![](lily.png)"); //將參數(shù)html的內(nèi)容插入到前面，作為子元素
    
    
    
    $("div.drow").append(function (index) {     //參數(shù)是函數(shù)，index是索引，返回的內(nèi)容就是要插入到前面的內(nèi)容

         if (this.id == "row1")
             return orchildElem;                //返回的對象可以是jquery對象，也可以是html標(biāo)簽，如：return "![](lily.png)

         else if (this.id = "row2")
             return newElems;
     });
    

appendTo是和append一樣的函數(shù)，都是將指定的元素插入到指定元素的前面作為子元素，但是他們的參數(shù)就不同了，append是將指定的參數(shù)插入到當(dāng)前調(diào)用它的的結(jié)果集中，而appendTo是將當(dāng)前調(diào)用它的結(jié)果集插入到指定的參數(shù)中，主要的形式有appendTo(jquery),append(HTMLELments[])
實(shí)例：

$("![](lily.png)").appendTo($("img").last().parent());   //將圖片插入到最后一個(gè)dcell中，這里參數(shù)是目標(biāo)位置，開頭調(diào)用的時(shí)想要插入的內(nèi)容

$("img:first").clone().appendTo($("img").last().parent()); //選擇第一個(gè)圖片插入到最后一個(gè)dcell中，這里必須用clone，否則就會(huì)將這張圖片移到目標(biāo)位置

 $($("div.dcell").html()).appendTo($("img").last().parent());   //這里的.html()是獲取html文本內(nèi)容

.prepend()和.prependTo()實(shí)現(xiàn)同樣的功能，主要的不同是語法，插入的內(nèi)容和目標(biāo)的位置不同。 對于 .prepend() 而言，選擇器表達(dá)式寫在方法的前面，作為待插入內(nèi)容的容器，將要被插入的內(nèi)容作為方法的參數(shù)。而 .prependTo() 正好相反，將要被插入的內(nèi)容寫在方法的前面，可以是選擇器表達(dá)式或動(dòng)態(tài)創(chuàng)建的標(biāo)記，待插入內(nèi)容的容器作為參數(shù)。

在匹配元素集合中的每個(gè)元素后面插入?yún)?shù)所指定的內(nèi)容，作為其兄弟節(jié)點(diǎn)。形式有after(content[content,]),after(function()),這里的content內(nèi)容有HTML字符串，DOM 元素，文本節(jié)點(diǎn)，元素和文本節(jié)點(diǎn)的數(shù)組，或者jQuery對象，用來插入到集合中每個(gè)匹配元素的后面
實(shí)例：

      var orchildElems = $("
").append("![](orchid.png)")
        .append("Orchild:")
        .append("");     //創(chuàng)建一個(gè)dcell內(nèi)容
        
    
        $("div.dcell").after(orchildElems);   //插入元素作為兄弟元素，在當(dāng)前元素的后面
        
        
        $("#row1 div.dcell").after(function (index, html) {    //index表示索引，html表示原來的html文本，指的是沒有插入之前的html
        console.log(html);
        if (index == 0)return orchildElem;        //返回的可以是jquery對象，html文本
        else if (index == 1)
            return newElems;
    });
});
        

根據(jù)參數(shù)設(shè)定，在匹配元素的前面插入內(nèi)容,形式和after一樣，內(nèi)容也差不多

和prependTo的用法差不多，只是參數(shù)是要插入的目標(biāo)位置，作為兄弟元素插入
實(shí)例：

orchildElems.clone().insertBefore("#row2 div.dcell");

和append用法差不多，只是參數(shù)是要插入的目標(biāo)位置，這里的也是作為兄弟元素插入的
實(shí)例：

orchildElems.insertAfter("#row1 div.dcell");

在集合中匹配的每個(gè)元素周圍包裹一個(gè)HTML結(jié)構(gòu)，將會(huì)作為父元素存在。形式為wrap(html),wrap(jquery),wrap(HtmlElements[]),wrap(function())
實(shí)例：

    div=$("
").css("border","thick double red");
    $("div.drow").wrap(div);     //在drow外層添加了一個(gè)div將作為父元素，可以看到現(xiàn)在的源代碼變成了
...
    
    
    $(".drow").wrap(function (index) {   //index是索引
    //if($(this).has("img[src*=astor]").length>0)
    if(index==0)
        return div;      //只在第一個(gè)drow中添加父元素div
    else 
        return $("
").css("border","thick double blue");
})

將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。形式為unwrap(),unwrap(selector)
實(shí)例：

  $("div.dcell").css("border","thick double red");
    $("div.dcell").children("img").first().unwrap();   //這里將第一個(gè)img元素的父級元素刪除，并且保留了其中的子元素
    
    $("div.dcell").children("img").unwrap(":first");   //這里使用參數(shù)來篩選要?jiǎng)h除父級元素的當(dāng)前元素，這里選擇第一個(gè)元素

在集合中所有匹配元素的外面包裹一個(gè)HTML結(jié)構(gòu),也就是為結(jié)果集中的所有元素都設(shè)置了一個(gè)相同的父級元素來包裹所有的元素，形式為wrapAll(html),wrapAll(jquery),wrapAll(htmlElements[]),wrapAll(function())
實(shí)例：

var div = $("
").css("border", "thick double red");
$("div.drow").wrapAll(div);    //這里的div成為了他共有的父級元素，原來的父級元素變成了祖先元素了
$("img").wrapAll(div);  //這里的img沒有共同的父元素，那么就會(huì)強(qiáng)制的將所有的元素拉在一起為他們設(shè)置一個(gè)父級元素

在匹配元素里的內(nèi)容外包一層結(jié)構(gòu),也就是為匹配元素的后代元素添加一個(gè)父級元素，但是這個(gè)父級元素是匹配元素的子代元素，也就是原來的匹配元素變成了祖先元素，形式為wrapInner(html),wrapInner(jquery),wrapInner(htmlElements),wrapInner(function())
實(shí)例：

    var div = $("
").css("border", "thick double red");
    $(".dcell").wrapInner(div);    //這里的dcell元素將會(huì)變成祖先元素，而div將會(huì)變成內(nèi)部后代元素新的父級元素

用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合,形式為replace(html),replaceWith(jquery),replaceWith(function())
實(shí)例：

 var newElems = $("
").append("![](lily.png)")
 .append("Lily").append("").css("border", "thick   double blue");
$(".dcell:first").replaceWith(newElems);  //用newElems替換第一個(gè)dcell


$("div.drow img").replaceWith(function () {
    if (this.src.indexOf("rose") > -1)
        return $("![](lily.png)").css("border","thick double red"); //返回的時(shí)替換的內(nèi)容，可以是jquery或者h(yuǎn)tml
    else if (this.src.indexOf("peony") > -1)
        return newElems;
    else return $(this.clone()).css("border","thick double blue");

})

用集合的匹配元素替換每個(gè)目標(biāo)元素。.replaceAll()和.replaceWith()功能類似，但是目標(biāo)和源相反
實(shí)例：

 $("![](lily.png)").replaceAll("#row1 img");   //這里使用![](lily.png)替換所有的img元素

將匹配元素集合從DOM中刪除,并且同時(shí)移除元素上的事件及 jQuery 數(shù)據(jù)
實(shí)例：

$("div.dcell").remove(":has(img[src*=rose])");  //刪除img

$("div.dcell:first()").remove();    //不帶參數(shù)

從DOM中去掉所有匹配的元素,.detach() 方法和.remove()一樣, 除了 .detach()保存所有jQuery數(shù)據(jù)和被移走的元素相關(guān)聯(lián)。當(dāng)需要移走一個(gè)元素，不久又將該元素插入DOM時(shí)，這種方法很有用。
實(shí)例：

$("div.dcell").detach();

$("div.dcell").detach(":has(img[src*=rose])"); 

從DOM中移除集合中匹配元素的所有子節(jié)點(diǎn)。

$("div.dcell:first").empty();   //刪除所有的子節(jié)點(diǎn)

JQuery中文文檔

更多內(nèi)容請移步本人博客