摘要：在匹配元素集合中的每個元素后面插入參數所指定的內容，作為其兄弟節點。當需要移走一個元素，不久又將該元素插入時，這種方法很有用。實例從中移除集合中匹配元素的所有子節點。

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

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

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

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

替換元素：replaceWith,replaceAll

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

通常在把新元素插入到DOM中的目標位置之前，要先創建一個新元素才能將它插入到指定位置

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

克隆元素，使用clone方法以已有的元素為模子生成新的元素，這個在后面的插入元素起到關鍵作用，如果在要引用html中的一個標簽內容的話，不使用clone方法，那么就會將這段內容移動，因此這里使用clone會很方便，詳細請看append的用法實例
實例：

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

DOM API是用js操作的，其實jquery在幕后悄悄的調用DOM API
實例：

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

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

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

    var newElem=$(divElem);

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

    });

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

//這里使用append元素創建了一個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);   //在末尾插入數據，這里的參數是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);   //在其中添加兩個參數，插入的先后按照參數的先后位置，當然其中的參數個數沒有限制
    
    
    
        

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

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

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

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

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

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

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

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

.prepend()和.prependTo()實現同樣的功能，主要的不同是語法，插入的內容和目標的位置不同。 對于 .prepend() 而言，選擇器表達式寫在方法的前面，作為待插入內容的容器，將要被插入的內容作為方法的參數。而 .prependTo() 正好相反，將要被插入的內容寫在方法的前面，可以是選擇器表達式或動態創建的標記，待插入內容的容器作為參數。

在匹配元素集合中的每個元素后面插入參數所指定的內容，作為其兄弟節點。形式有after(content[content,]),after(function()),這里的content內容有HTML字符串，DOM 元素，文本節點，元素和文本節點的數組，或者jQuery對象，用來插入到集合中每個匹配元素的后面
實例：

      var orchildElems = $("
").append("![](orchid.png)")
        .append("Orchild:")
        .append("");     //創建一個dcell內容
        
    
        $("div.dcell").after(orchildElems);   //插入元素作為兄弟元素，在當前元素的后面
        
        
        $("#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;
    });
});
        

根據參數設定，在匹配元素的前面插入內容,形式和after一樣，內容也差不多

和prependTo的用法差不多，只是參數是要插入的目標位置，作為兄弟元素插入
實例：

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

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

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

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

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

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

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

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

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

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

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

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

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


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

})

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

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

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

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

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

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

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

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

從DOM中移除集合中匹配元素的所有子節點。

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

JQuery中文文檔

更多內容請移步本人博客