jQuery DOM節點的建立、插入、刪除

時間 2019-12-08

標籤 jquery dom 節點建立插入刪除欄目 JQuery 简体版

原文原文鏈接

DOM節點的建立

DOM建立節點及節點屬性

首先，介紹如何使用JavaScript建立div節點元素，主要包括建立div節點元素的屬性和建立div節點元素的樣式兩大部份內容javascript

建立流程：css

建立節點(常見的：元素、屬性和文本)html
添加節點的一些屬性前端
加入到文檔中java

涉及方法：jquery

建立元素：document.createElement數組
設置屬性：setAttribute瀏覽器
添加文本：innerHTMLapp
加入文檔：appendChild函數

注：

每個元素節點都必須單首創建
節點是屬性須要單獨設置，並且設置的接口不是很統一
添加到指定的元素位置不靈活
瀏覽器兼容問題處理

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>動態建立元素節點</h2>
    <div class="left">
        <div class="aaron">點擊body區域會動態建立元素節點</div>
    </div>
    <script type="text/javascript">
        var body = document.querySelector('body');

        document.addEventListener('click',function(){
            
            //建立2個div元素
            var rightdiv = document.createElement('div')
            var rightaaron = document.createElement("div");

            //給2個div設置不一樣的屬性
            rightdiv.setAttribute('class', 'right')
            rightaaron.className = 'aaron'
            rightaaron.innerHTML = "動態建立DIV元素節點";

            //2個div合併成包含關係
            rightdiv.appendChild(rightaaron)
               
               //繪製到頁面body
               body.appendChild(rightdiv)

        },false)

    </script>
</body>

</html>

jQuery節點建立與屬性的處理

建立元素節點

常見的是直接把這個節點的結構給經過HTML標記字符串描述出來，經過$()函數處理，$("html結構")

$("<div></div>")

建立爲文本節點

與建立元素節點相似，能夠直接把文本內容一併描述

$("<div>我是文本節點</div>")

建立爲屬性節點

與建立元素節點一樣的方式

$("<div id='test' class='aaron'>我是文本節點</div>")

經過jQuery對上一節代碼進行改造

$("<div class='right'><div class='aaron'>動態建立DIV元素節點</div></div>")

這就是jQuery建立節點的方式，讓咱們保留HTML的結構書寫方式，很是的簡單、方便和靈活

DOM節點的插入

DOM內部插入append()與appendTo()

動態建立的元素只是臨時存放在內存中，最終須要放到頁面文檔並呈現出來。這裏就涉及到一個位置關係，常見的就是把這個新建立的元素，看成頁面某一個元素的子元素放到其內部。針對這樣的處理，jQuery就定義2個操做的方法

append：這個操做與對指定的元素執行原生的appendChild方法，將它們添加到文檔中的狀況相似
appendTo：實際上，使用這個方法是顛倒了常規的$(A).append(B)的操做，即不是把B追加到A中，而是把A追加到B中。

.append()和.appendTo()兩種方法功能相同，主要的不一樣是語法——內容和目標的位置不一樣

append()前面是被插入的對象，後面是要在對象內插入的元素內容
appendTo()前面是要插入的元素內容，然後面是被插入的對象

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .content {
        width: 300px;
    }
    .append{
        background-color: blue;
    }
    .appendTo{
        background-color: red;
    }
    </style>
</head>

<body>
    <h2>經過append與appendTo添加元素</h2>
    <button id="bt1">點擊經過jQuery的append添加元素</button>
    <button id="bt2">點擊經過jQuery的appendTo添加元素</button>

    <div class="content"></div>

    <script type="text/javascript">

        $("#bt1").on('click', function() {
            //.append(), 內容在方法的後面，
            //參數是將要插入的內容。
            $(".content").append('<div class="append">經過append方法添加的元素</div>')
        })

    </script>

    <script type="text/javascript">

        $("#bt2").on('click', function() {
            //.appendTo()恰好相反，內容在方法前面，
            //不管是一個選擇器表達式 或建立做爲標記上的標記
            //它都將被插入到目標容器的末尾。
            $('<div class="appendTo">經過appendTo方法添加的元素</div>').appendTo($(".content"))
        })

    </script>

</body>

</html>

DOM外部插入after()與before()

外部插入的處理，也就是兄弟之間的關係處理，這裏jQuery引入了2個方法，能夠用來在匹配的元素先後插入內容

選擇器的描述

before與after都是用來對相對選中元素外部增長相鄰的兄弟節點
2個方法都是均可以接收HTML字符串，DOM 元素，元素數組，或者jQuery對象，用來插入到集合中每一個匹配元素的前面或者後面
2個方法都支持多個參數傳遞after(div1,div2,....) 能夠參考右邊案例代碼

注意點
after向元素的後邊添加html代碼，若是元素後面有元素了，那將後面的元素後移，而後將html代碼插入
before向元素的前邊添加html代碼，若是元素前面有元素了，那將前面的元素前移，而後將html代碼插

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .aaron{
        border: 1px solid red;
    }
    </style>
</head>

<body>
    <h2>經過before與after添加元素</h2>
    <button id="bt1">點擊經過jQuery的before添加元素</button>
    <button id="bt2">點擊經過jQuery的after添加元素</button>
    <div class="aaron">
        <p class="test1">測試before</p>
    </div>
    <div class="aaron">
        <p class="test2">測試after</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在匹配test1元素集合中的每一個元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素以前增長</p>', '<p style="color:red">多參數</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在匹配test1元素集合中的每一個元素後面插入p元素
        $(".test2").after('<p style="color:blue">after,在匹配元素以後增長</p>', '<p style="color:blue">多參數</p>')

    })
    </script>
</body>

DOM內部插入prepend()與prependTo()

在元素內部進行操做的方法，除了在被選元素的結尾（仍然在內部）經過append與appendTo插入指定內容外，相應的還能夠在被選元素以前插入，jQuery提供的方法是prepend與prependTo

選擇器的描述：

經過右邊代碼能夠看到prepend與prependTo的使用及區別：

.prepend()方法將指定元素插入到匹配元素裏面做爲它的第一個子元素 (若是要做爲最後一個子元素插入用.append()).
.prepend()和.prependTo()實現一樣的功能，主要的不一樣是語法，插入的內容和目標的位置不一樣
對於.prepend() 而言，選擇器表達式寫在方法的前面，做爲待插入內容的容器，將要被插入的內容做爲方法的參數
.prependTo() 正好相反，將要被插入的內容寫在方法的前面，能夠是選擇器表達式或動態建立的標記，待插入內容的容器做爲參數。

這裏總結下內部操做四個方法的區別：

append()向每一個匹配的元素內部追加內容
prepend()向每一個匹配的元素內部前置內容
appendTo()把全部匹配的元素追加到另外一個指定元素的集合中
prependTo()把全部匹配的元素前置到另外一個指定的元素集合中

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .aaron1{
        border: 1px solid red;
    }
    .aaron1 p {
        color: red;
    }
    .aaron2{
        border: 1px solid blue;
    }
    .aaron2 p {
        color: blue;
    }
    </style>
</head>

<body>
    <h2>經過prepend與prependTo添加元素</h2>
    <button id="bt1">點擊經過jQuery的prepend添加元素</button>
    <button id="bt2">點擊經過jQuery的prependTo添加元素</button>
    <div class="aaron1">
        <p>測試prepend</p>
    </div>
    <div class="aaron2">
        <p>測試prependTo</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //找到class="aaron1"的div節點
        //而後經過prepend在內部的首位置添加一個新的p節點
        $('.aaron1')
            .prepend('<p>prepend增長的p元素</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //找到class="aaron2"的div節點
        //而後經過prependTo內部的首位置添加一個新的p節點
        $('<p>prependTo增長的p元素</p>')
            .prependTo($('.aaron2'))
    })
    </script>
</body>

</html>

DOM外部插入insertAfter()與insertBefore()

與內部插入處理同樣，jQuery因爲內容目標的位置不一樣，然增長了2個新的方法insertAfter與insertBefore

.before()和.insertBefore()實現一樣的功能。主要的區別是語法——內容和目標的位置。對於before()選擇表達式在函數前面，內容做爲參數，而.insertBefore()恰好相反，內容在方法前面，它將被放在參數裏元素的前面
.after()和.insertAfter() 實現一樣的功能。主要的不一樣是語法——特別是（插入）內容和目標的位置。對於after()選擇表達式在函數的前面，參數是將要插入的內容。對於 .insertAfter(), 恰好相反，內容在方法前面，它將被放在參數裏元素的後面
before、after與insertBefore、insertAfter的除了目標與位置的不一樣外，後面的不支持多參數處理

注意事項

insertAfter將JQuery封裝好的元素插入到指定元素的後面，若是元素後面有元素了，那將後面的元素後移，而後將JQuery對象插入；
insertBefore將JQuery封裝好的元素插入到指定元素的前面，若是元素前面有元素了，那將前面的元素前移，而後將JQuery對象插入；

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>經過insertBefore與insertAfter添加元素</h2>
    <button id="bt1">點擊經過jQuery的insertBefore添加元素</button>
    <button id="bt2">點擊經過jQuery的insertAfter添加元素</button>
    <div class="aaron">
        <p class="test1">測試insertBefore,不支持多參數</p>
    </div>
    <div class="aaron">
        <p class="test2">測試insertAfter,不支持多參數</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在test1元素先後插入集合中每一個匹配的元素
        //不支持多參數
        $('<p style="color:red">測試insertBefore方法增長</p>', '<p style="color:red">多參數</p>').insertBefore($(".test1"))
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在test2元素先後插入集合中每一個匹配的元素
        //不支持多參數
        $('<p style="color:red">測試insertAfter方法增長</p>', '<p style="color:red">多參數</p>').insertAfter($(".test2"))
    })
    </script>
</body>

</html>

DOM節點的刪除

jQuery提供了幾種不一樣的方法來處理移除頁面上節點的操做

empty方法：清空方法，可是與刪除有點不同，由於它只移除指定元素中的全部子節點

這個方法不只移除子元素（和其餘後代元素），一樣移除元素裏的文本。由於，根聽說明，元素裏任何文本字符串都被看作是該元素的子節點

<div class="hello"><p>中國有嘻哈</p></div>

若是咱們經過empty方法移除裏面div的全部元素，它只是清空內部的html代碼，可是標記仍然留在DOM中

//經過empty處理
$('.hello').empty()

//結果：<p>中國有嘻哈</p>被移除
<div class="hello"></div>

remove()的有參用法和無參用法

remove與empty同樣，都是移除元素的方法，可是remove會將元素自身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。

例如一段節點，綁定點擊事件

<div class="hello"><p>中國有嘻哈</p></div>
$('.hello').on("click",fn)

若是不經過remove方法刪除這個節點其實也很簡單，可是同時須要把事件給銷燬掉，這裏是爲了防止"內存泄漏"，因此前端開發者必定要注意，綁了多少事件，不用的時候必定要記得銷燬

經過remove方法移除div及其內部全部元素，remove內部會自動操做事件銷燬方法，因此使用使用起來很是簡單

//經過remove處理
$('.hello').remove()
//結果：<div class="hello"><p>中國有嘻哈</p></div> 所有被移除
//節點不存在的同時，事件也會被銷燬

remove表達式參數

remove比empty好用的地方就是能夠傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，能夠選擇性的刪除指定的節點

能夠經過$()選擇一組相同的元素，而後經過remove()傳遞篩選的規則從而進行處理

empty和remove區別

要用到移除指定元素的時候，jQuery提供了empty()與remove([expr])二個方法，兩個都是刪除元素，可是二者仍是有區別

empty方法

嚴格地講，empty()方法並非刪除節點，而是清空節點，它能清空元素中的全部後代節點
empty不能刪除本身自己這個節點

remove方法

該節點與該節點所包含的全部後代節點將同時被刪除
提供傳遞一個篩選的表達式，刪除指定合集中的元素

保留數據的刪除操做detach()

這個方法不會把匹配的元素從jQuery對象中刪除，於是能夠在未來再使用這些匹配的元素。與remove()不一樣的是，全部綁定的事件、附加的數據等都會保留下來

$("div").detach()這一句會移除對象，僅僅是顯示效果沒有了。可是內存中仍是存在的。當你append以後，又從新回到了文檔流中。就又顯示出來了

固然這裏要特別注意，detach方法是JQuery特有的，因此它只能處理經過JQuery的方法綁定的事件或者數據

<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style type="text/css">
    p {
        color: red;
    }
    </style>
</head>

<body>
    <p>P元素1，默認給綁定一個點擊事件</p>
    <p>P元素2，默認給綁定一個點擊事件</p>
    <button id="bt1">點擊刪除 p 元素</button>
    <button id="bt2">點擊移動 p 元素</button>
    <script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //經過detach方法刪除元素
        //只是頁面不可見，可是這個節點仍是保存在內存中
        //數據與事件都不會丟失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到頁面中
        //事件仍是存在
        $("body").append(p);
    });
    </script>
</body>

</html>

detach()和remove()區別

經過一張對比表來解釋2個方法之間的不一樣

方法名	參數	事件及數據是否也被移除	元素自身是否被移除
remove	支持選擇器表達	是	是（無參數時），有參數時要根據參數所涉及的範圍
detach	支持選擇器表達	否	是（無參數時），有參數時要根據參數所涉及的範圍

remove：移除節點

無參數，移除自身整個節點以及該節點的內部的全部節點，包括節點上事件與數據
有參數，移除篩選出的節點以及該節點的內部的全部節點，包括節點上事件與數據

detach：移除節點

移除的處理與remove一致
與remove()不一樣的是，全部綁定的事件、附加的數據等都會保留下來
例如：$("p").detach()這一句會移除對象，僅僅是顯示效果沒有了。可是內存中仍是存在的。當你append以後，又從新回到了文檔流中。就又顯示出來了。

<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    p{
        border: 1px solid red;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
        //給頁面上2個p元素都綁定時間
        $('p').click(function(e) {
            alert(e.target.innerHTML)
        })
    
        $("button:first").click(function() {
            var p = $("p:first").remove();
            p.css('color','red').text('p1經過remove處理後,點擊該元素,事件丟失')
            $("body").append(p);
        });
    
        $("button:last").click(function() {
            var p = $("p:first").detach();
            p.css('color','blue').text('p2經過detach處理後,點擊該元素事件存在')
            $("body").append(p);
        });
    </script>
</head>

<body>
    <h3>給頁面2個p元素節點綁定點擊事件,點擊後彈出本身自己的節點內容</h3>
    <p>元素p1，同時綁定點擊事件</p>
    <p>元素p2，同時綁定點擊事件</p>
    <h3>經過點擊2個按鈕後觀察方法處理的區別</h3>
    <button>點擊經過remove處理元素p1</button>
    <button>點擊經過detach處理元素p2</button>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。