JQuery乾貨篇之插入元素

JQuery乾貨篇之插入元素

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

分類

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

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

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

4. 替換元素：replaceWith,replaceAll

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

建立新元素

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

使用$建立元素

$(<div>![](rose.png)</div>)

clone

克隆元素，使用clone方法以已有的元素爲模子生成新的元素，這個在後面的插入元素起到關鍵做用，若是在要引用html中的一個標籤內容的話，不使用clone方法，那麼就會將這段內容移動，所以這裏使用clone會很方便，詳細請看append的用法實例

實例：

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

使用DOM API建立新元素

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

    });

append

把參數指定的元素插入到全部的JQuery內含元素內容末尾成爲他們的最後一個子元素，形式有append(html),append(Jquery),append(HTMLElements[])，append(function())

實例：

//這裏使用append元素建立了一個div元素，在末尾插入元素成爲div的子元素
//
    var orchildElems = $("<div class='dcell'></div>").append("![](orchid.png)")
        .append("<label for='orchild'>Orchild:</label>")
        .append("<input name='orchild' value='0' required>");

    var newElems = $("<div class='dcell'></div>").append("![](lily.png)")
        .append("<label for='lily'>Lily:</label>")
        .append("<input name='lily' value='0' required>")
        .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);   //在其中添加兩個參數，插入的前後按照參數的前後位置，固然其中的參數個數沒有限制

prepend

和append徹底相反,向當前元素的前面插入html節點做爲當前元素的子元素,形式有prepen d(Jquery),prepend(html),prepend(htmlElemnts[]),prepend(function())

實例：

var orchildElems = $("<div class='dcell'></div>").append("![](orchid.png)")
        .append("<label for='orchild'>Orchild:</label>")
        .append("<input name='orchild' value='0' required>");
    $("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

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文本內容

prependTo

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

after

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

實例：

var orchildElems = $("<div class='dcell'></div>").append("![](orchid.png)")
        .append("<label for='orchild'>Orchild:</label>")
        .append("<input name='orchild' value='0' required>");     //建立一個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;
    });
});

before

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

insertBefore

和prependTo的用法差很少，只是參數是要插入的目標位置，做爲兄弟元素插入

實例：

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

insertAfter

和append用法差很少，只是參數是要插入的目標位置，這裏的也是做爲兄弟元素插入的

實例：

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

wrap

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

實例：

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

unwrap

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

實例：

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

wrapAll

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

實例：

var div = $("<div></div>").css("border", 'thick double red');
$("div.drow").wrapAll(div);    //這裏的div成爲了他共有的父級元素，原來的父級元素變成了祖先元素了
$("img").wrapAll(div);  //這裏的img沒有共同的父元素，那麼就會強制的將全部的元素拉在一塊兒爲他們設置一個父級元素

wrapInner

在匹配元素裏的內容外包一層結構,也就是爲匹配元素的後代元素添加一個父級元素，可是這個父級元素是匹配元素的子代元素，也就是原來的匹配元素變成了祖先元素，形式爲wrapInner(html),wrapInner(jquery),wrapInner(htmlElements),wrapInner(function())

實例：

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

replaceWith

用提供的內容替換集合中全部匹配的元素而且返回被刪除元素的集合,形式爲replace(html),replaceWith(jquery),replaceWith(function())

實例：

var newElems = $("<div class='dcell'></div>").append("![](lily.png)")
 .append("<label for='lily'>Lily</label>").append("<input name='lily' value='0' required>").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

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

實例：

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

remove

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

實例：

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

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

detach

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

實例：

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

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

empty

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

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

參考文章

• JQuery中文文檔

• 更多內容請移步本人博客