DOM 插入操作(包覆、外部、內部) (jQuery 18)

※DOM包覆插入操作

官網連結

目前有4個：
wrap就是包覆起來的意思
.wrap()：插入到外層
.wrapInner()：插入到內層
.wrapAll()：會將選擇器變成一組，然後插入到外層
.unwrap()：將外層刪除

※範例

<style>
    .xxx{border:solid 1px blue}
    .ooo{border:solid 1px red}
</style>
    
$(function() {
    //$('p').wrap('<div>div</div>');
    $('p').wrap(function(){
        return '<div>div</div>';
    });
    
    //$('p').wrapInner('<div>div</div>');
    /*
    $('p').wrapInner(function(){
        return '<div>div</div>';
    });
    */
    
    //$('p').wrapAll('<div>div</div>');
    
    $('p').addClass('xxx');
    $('div').addClass('ooo');
    $('button').click(function(){
        $('p').unwrap();
    });
});
----------
<p>p1</p>
<span>span1</span>
<p>p2</p>
<span>span2</span>
<p>p3</p>
<button>unwrap</button>

※wrapAll()沒有function的寫法

※裡面不一定要寫HTML，也可以寫選擇器

※以下是按F12看到的結果，IE按DOM總管；Chrome按Elements，檢視原始檔是看不出來的

※HTML使用wrap後會變成如下的樣子

<div>
    div
    <p>p1</p>
</div>
<span>span1</span>
<div>
    div
    <p>p2</p>
</div>
<span>span2</span>
<div>
    div
    <p>p3</p>
</div>

※HTML使用wrapInner後會變成如下的樣子

<p>
    <div>
        div
        p1
    </div>
</p>
<span>span1</span>
<p>
    <div>
        div
        p2
    </div>
</p>
<span>span2</span>
<p>
    <div>
        div
        p3
    </div>
</p>

※HTML使用wrapAll後會變成如下的樣子

<div>
    div
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
<span>span1</span>
<span>span2</span>

※DOM 外部插入操作

官網連結

目前有4個：
.after()：在前面插入
.before()：在後面插入
.insertAfter()：在前面插入
.insertBefore()：在後面插入

※after和insertAfter基本功能一樣，只是一個選擇器在前、一個在後；before和insertBefore也是一樣

※after和before還多了function寫法和多個參數寫法

※基本寫法

$(function(){
    $('p').after('<div>div</div>');
    // $('<div>div</div>').insertAfter('p');
    
    // $('p').before('<div>div</div>');
    // $('<div>div</div>').insertBefore('p');
});
----------
<p>p1</p>
<span>span1</span>
<p>p2</p>
<span>span2</span>
<p>p3</p>

※HTML會變成如下的樣子

<p>p1</p>
<div>div</div>
<span>span1</span>
<p>p2</p>
<div>div</div>
<span>span2</span>
<p>p3</p>
<div>div</div>

※p後面會多個div；before就變成在前面

※after和before的function和多參數寫法

$(function(){
    // $('p').after('<div>div</div><h1>h1</h1>');
    $('p').after('<div>div</div>', '<h1>h1</h1>');
    /*
    $('p').after(function(){
        return '<div>div</div>';
    });
    */
});
----------
<p>p1</p>
<span>span1</span>
<p>p2</p>
<span>span2</span>
<p>p3</p>

※第一行的註解和第二行都是一樣的意思

※多行註解是function的寫法，當然不會有return '<div>div</div>', '<h1>h1</h1>'這種東西

※DOM 內部插入操作

官網連結

目前有6個：
.append()：在後面插入
.appendTo()：在後面插入
.prepend()：在前面插入
.prependTo()：在前面插入

※append和appendTo基本功能一樣，只是一個選擇器在前、一個在後；prepend和prependTo也是一樣

※append和prepend還多了function寫法和多個參數寫法

※prepend的HTML看起來和before一樣，兩個都寫的話，會發現prepend會在裡面、before在最外面；append和after這一組也是一樣

.text()：設定和取得「<>xxx</>」之間的字元，也就是xxx，所以input無效，因為它是value
此方法對HTML和XML都有效
如果設定HTML，會將「<」轉成「&lt;」；「>」轉成「&gt;」

.html()：設定和取得HTML，此方法只對HTML有效，所以名稱才取名為html

※.append()、.appendTo()、.prepend()、.prependTo() 的基本寫法

$(function(){
    $('p').append('<div>div</div>');
    // $('<div>div</div>').appendTo('p');
    
    // $('p').prepend('<div>div</div>');
    // $('<div>div</div>').prependTo('p');
});
----------
<p>p1</p>
<span>span1</span>
<p>p2</p>
<span>span2</span>
<p>p3</p>

※append和prepend的function和參數寫法

$(function(){
    $('p').append('<div>div</div><h1>h1</h1>');
    // $('p').append('<div>div</div>', '<h1>h1</h1>');
    /*
    $('p').append(function(){
        return '<div>div</div>';
    });
    */
});
----------
<p>p1</p>
<span>span1</span>
<p>p2</p>
<span>span2</span>
<p>p3</p>

※取得.text()、.html()

$(function(){
    alert($('div').html());
    alert($('div').text());
});
----------
<div>
    div
    <p>
        p
        <span>span</span>
    </p>
</div>

※結果：

※上面是html()；下面是text()，可以看出text沒有html標籤

※設定.text()、.html()

$(function() {
    $('p').text('<h1>h1</h1>');
    // $('p').html('<h1>h1</h1>');
});
----------
<div>
    div
    <p>
        p
        <span>span</span>
    </p>
</div>

※.text()結果(上面是結果圖，下面是HTML最後的結果)：

※.html()結果(上面是結果圖，下面是HTML最後的結果)：

※使用function設定.text()、.html()

$(function() {
    $('p > span').text(function(i){
        return '<h1>' + i + '</h1>';
    });
    
    /*
    $('p > span').text(function(i){
        return '<h1>' + i + '</h1>';
    });
    */
});
----------
<div>
    div
    <p>
        p
        <span>span</span>
        <span>span</span>
        <span>span</span>
    </p>
</div>

※.text()結果(上面是結果圖，下面是HTML最後的結果)：

※.html()結果(上面是結果圖，下面是HTML最後的結果)：