6.3 插入節點_jQuery基礎知識

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> jQuery基礎知識 >> 6.3 插入節點

6.3 插入節點

編輯：jQuery基礎知識

在JavaScript中，插入節點只有appendChild()和insertBefore()這兩種方法。但是jQuery卻為我們插入節點提供了大量的方法，極大地方便了我們的操作。

在jQuery中，常見插入節點的方法共有4組：

（1）append()和appendTo()；
（2）prepend()和prependTo()；
（3）before()和insertBefore()；
（4）after()和insertAfter()；

這4組插入節點的方法都有所不同，其中（1）和（2）是“內部插入節點”，（3）和（4）是“外部插入節點”。下面我們一一給大家介紹。

一、append()和appendTo()

1、append()

append()表示向所選元素內部的“末尾”插入內容。

語法：

 
$(A).append(B)

說明：

$(A).append(B)表示在A內部的“末尾”插入B。

舉例：

在線測試

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p{background-color:orange;}
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var $strong = "<strong>jQuery入門教程</strong>";
                $("p").append($strong);
            })
        })
    </script>
</head>
<body>
    <p> 學習網</p>
    <input id="btn" type="button" value="append插入"/>
</body>
</html>

在浏覽器預覽效果如下：

當我們點擊“插入”按鈕之後，預覽效果如下：

分析：

在CSS中，我們為p元素添加一個背景色，因此可以很直觀地看到內容究竟被添加到p元素內部，還是外部。

當我們點擊“插入”按鈕之後，得到的HTML結構如下：

 
<p> 學習網<strong>jQuery入門教程</strong></p>

2、appendTo()

appendTo()跟append()類似，作用都是在所選元素內部的“末尾”插入內容。但是兩者的“使用方式”卻是顛倒操作。

語法：

 
$(A).appendTo(B)

說明：

$(A).appendTo(B)表示將A插入B內部的“末尾”。

append()和appendTo()作用一樣，新手們很容易搞混。不過呢，我們仔細琢磨一下“to”的英文意思，這可以幫助我們區分以及記憶這兩種方法。append()表示在元素中插入內容，而appendTo()表示將內容插入“到（to）”元素中。

舉例：

在線測試

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p{background-color:orange;}
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var $strong = "<strong>jQuery入門教程</strong>";
                $($strong).appendTo("p");
            })
        })
    </script>
</head>
<body>
    <p> 學習網</p>
    <input id="btn" type="button" value="appendTo插入"/>
</body>
</html>

在浏覽器預覽效果如下：

當我們點擊“插入”按鈕之後，預覽效果如下：

分析：

 
var $strong = "<strong>jQuery入門教程</strong>";
$("p").append($strong);

 
var $strong = "<strong>jQuery入門教程</strong>";
$($strong).appendTo("p");

上面這兩種插入節點的方法是等價的。

二、prepend()和prependTo()

1、prepend()

prepend()表示向所選元素內部的“開始”插入節點。

語法：

 
$(A).prepend(B)

說明：

$(A).prepend(B)表示在A內部的“開始”插入B。

舉例：

在線測試

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p{background-color:orange;}
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var $strong = "<strong>jQuery入門教程</strong>";
                $("p").prepend($strong);
            })
        })
    </script>
</head>
<body>
    <p> 學習網</p>
    <input id="btn" type="button" value="prepend插入"/>
</body>
</html>

在浏覽器預覽效果如下：

當我們點擊“插入”按鈕之後，預覽效果如下：

分析：

當我們點擊“插入”按鈕之後，得到的HTML結構如下：

 
<p><strong>jQuery入門教程</strong> 學習網</p>

2、prependTo()

prependTo()跟prepend()類似，作用都是在所選元素內部的“開始”插入內容。但是兩者的“使用方式”卻是顛倒操作。

語法：

 
$(A).prependTo(B)

說明：

$(A).prependTo(B)表示將A插入B內部的“開始”。

prepend()和prependTo()的區別，跟append()和appendTo()的區別是類似的。

舉例：

在線測試

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p{background-color:orange;}
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var $strong = "<strong>jQuery入門教程</strong>";
                $($strong).prependTo("p");
            })
        })
    </script>
</head>
<body>
    <p> 學習網</p>
    <input id="btn" type="button" value="prependTo插入"/>
</body>
</html>

在浏覽器預覽效果如下：

當我們點擊“插入”按鈕之後，預覽效果如下：

分析：

 
var $strong = "<strong>jQuery入門教程</strong>";
$("p").prepend($strong);

 
var $strong = "<strong>jQuery入門教程</strong>";
$($strong).prependTo("p");

上面這兩種插入節點的方法是等價的。

三、before()和insertBefore()

1、before()

before()表示在所選元素外部“之前”插入節點。

語法：

 
$(A).before(B)

說明：

$(A).before(B)表示在A外部“之前”插入B。

舉例：

在線測試

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p{background-color:orange;}
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var $strong = "<strong>jQuery入門教程</strong>";
                $("p").before($strong);
            })
        })
    </script>
</head>
<body>
    <p> 學習網</p>
    <input id="btn" type="button" value="before插入"/>
</body>
</html>

在浏覽器預覽效果如下：

當我們點擊“插入”按鈕之後，預覽效果如下：

分析：

這個時候，我們之前在CSS中為p元素添加的背景色就真正展現了它的功能。我們將這個例子跟之前的例子仔細對比，可以很清晰地知道before()方法是將內容插入元素的外部。當我們點擊“插入”按鈕之後，得到的HTML結構如下：

 
<strong>jQuery入門教程</strong><p> 學習網</p>

2、insertBefore()

insertBefore()跟before()類似，作用也是在某個元素外部“之前”插入內容。但是兩者的“使用方式”卻是顛倒操作。

語法：

 
$(A).insertBefore(B)

說明：

$(A).insertBefore(B)表示將A插入B外部“之前”。

根據英文意思，我們也能很好區分before()和insertBefore()。before()表示在元素外插入內容，insertBefore()表示將內容插入元素外。

舉例：

在線測試

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p{background-color:orange;}
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var $strong = "<strong>jQuery入門教程</strong>";
                $($strong).insertBefore("p");
            })
        })
    </script>
</head>
<body>
    <p> 學習網</p>
    <input id="btn" type="button" value="insertBefore插入"/>
</body>
</html>

在浏覽器預覽效果如下：

當我們點擊“插入”按鈕之後，預覽效果如下：

分析：

 
var $strong = "<strong>jQuery入門教程</strong>";
$("p").before($strong);

 
var $strong = "<strong>jQuery入門教程</strong>";
$($strong).insertBefore("p");

上面這兩種插入節點的方法是等價的。

四、after()和insertAfter()

1、after()

after()表示在所選元素外部“之後”插入節點。

語法：

 
$(A).after(B)

說明：

$(A).after(B)表示在A外部“之後”插入B。

舉例：

在線測試

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p{background-color:orange;}
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var $strong = "<strong>jQuery入門教程</strong>";
                $("p").after($strong);
            })
        })
    </script>
</head>
<body>
    <p> 學習網</p>
    <input id="btn" type="button" value="after插入"/>
</body>
</html>

在浏覽器預覽效果如下：

當我們點擊“插入”按鈕之後，預覽效果如下：

分析：

當我們點擊“插入”按鈕之後，得到的HTML結構如下：

 
<p> 學習網</p><strong>jQuery入門教程</strong>

2、insertAfter()

insertAfter()跟after()作用類似，作用都是在某個元素外部“之前”插入內容。但是兩者的“使用方式”卻是顛倒操作。

語法：

 
$(A).insertAfter(B)

說明：

$(A).insertAfter(B)表示在A外部“之後”插入B。

根據英文意思，我們也能很好區分after()和insertAfter()。after()表示在元素外插入內容，insertAfter()表示將內容插入元素外。

舉例：

在線測試

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p{background-color:orange;}
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var $strong = "<strong>jQuery入門教程</strong>";
                $($strong).insertAfter("p");
            })
        })
    </script>
</head>
<body>
    <p> 學習網</p>
    <input id="btn" type="button" value="insertAfter插入"/>
</body>
</html>

在浏覽器預覽效果如下：

當我們點擊“插入”按鈕之後，預覽效果如下：

分析：

 
var $strong = "<strong>jQuery入門教程</strong>";
$("p").after($strong);

 
var $strong = "<strong>jQuery入門教程</strong>";
$($strong).insertAfter("p");

上面這兩種插入節點的方法是等價的。

總結

在jQuery中，常見插入節點的方法共有4組：

（1）append()和appendTo()；
（2）prepend()和prependTo()；
（3）before()和insertBefore()；
（4）after()和insertAfter()；

這4組插入節點的方法都有所不同，其中（1）和（2）是“內部插入節點”，（3）和（4）是“外部插入節點”。

其中，上面每一項的2種方法都是等價的。雖然說可以通過英文意思來區分2者的使用方法，但是如果要將這8中插入節點的方法，如果全部都需要記住的話，也給我們記憶增加不少負擔。

 
//第1組
append()、prepend()、before()、after()
//第2組
appendTo()、prependTo()、insertBefore()、insertAfter()

其實對於這8種方法，我們只需要掌握其中的4種就完全夠了。由於每一項的2種插入方法作用是等價的，而使用方法是“顛倒”操作。因此我們只需要記憶其中一組，另外一組就是反操作，也很容易對比記憶。

個人更加傾向於記憶第二組，畢竟語義非常直觀，意思都是把內容插入“到”元素中去。當然不管你常用的是哪一組，對另外一組也需要了解一下。

jQuery基礎知識

10.3 查找後代元素: 在jQuery中，提供了3種查找後代元素的方法：
7.7 綁定事件: 在之前的學習中，我們接觸了各種事件操作。在jQuery中，我們除了使用“基本事件”的方式來為元素添加
8.5 自定義動畫: 在前幾節，我們接觸了以下3種動畫：

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

小編推薦

5.2 CSS類名操作 10.3 查找後代元素 5.4 元素的位置offset()和position() 7.1 jQuery事件簡介 9.7 本章總結 6.7 包裹節點 6.2 創建節點 6.5 復制節點 8.1 jQuery動畫簡介 7.11 本章總結

DIV CSS 佈局教程網

一、append()和appendTo()

1、append()

2、appendTo()

二、prepend()和prependTo()

1、prepend()

2、prependTo()

三、before()和insertBefore()

1、before()

2、insertBefore()

四、after()和insertAfter()

1、after()

2、insertAfter()

相關文章