jquery after（）方法移除DOM元素

Jquery after()方法用於在所選元素之後插入HTML元素。我的代碼是jquery after（）方法移除DOM元素

<h2>Greetings</h2> 
    <div class="inner">Hello</div> 
    <div class="inner">Goodbye</div> 
    </div>

jQuery代碼：

$(".inner").after("<h2>Greetings</h2>");

上面的代碼工作正常。 Jquery在兩個div標籤後插入<h2>Greetings</h2>代碼。的HTML產生象下面

<div class="container"> 
    <h2>Greetings</h2> 
    <div class="inner">Hello</div> 
    <h2>Greetings</h2> 
    <div class="inner">Goodbye</div> 
    <h2>Greetings</h2> 
</div>

但是，當我通過jQuery選擇$('h2')作爲參數after()方法如下面

$(".inner").after($('h2'));

Jquery的移除第一原始<h2>Greetings</h2>標籤和之後插入兩後<h2>Greetings</h2>標籤div標籤。 HTML生成如下。

<div class="container"> 
    <div class="inner">Hello</div> 
    <h2>Greetings</h2> 
    <div class="inner">Goodbye</div> 
    <h2>Greetings</h2> 
</div>

傳遞Jquery DOM選擇器和純HTML標記時有什麼區別。

來源

2016-08-13 Bharath Kumar

當您使用一個字符串，jQuery的創建一個基於HTML的字符串傳遞在neccessary元素，所以

$("<h2>Greetings</h2>")

實際上創建了一個新的H2元素，而

$('h2')

選擇所有H2文檔中的元素。

由於after()確實像

$.fn.after = function(arg) { 
    return this.each(function() { // loops over all .inner elements 

     var elem = $(arg); // "h2" selects all H2, "<h2>" creates H2 elements 
     this.parentNode.insertBefore(elem, this.nextSibling); // something like that, 
    });              // not really important ? 
}

..它要麼創建因爲each環在$(".inner")找到的每個匹配元素的新H2 （$("<h2>")），或者它只是移動相同的元素從$('h2')到每個.inner之後，這意味着所選的H2元素將在最後之後結束.inner

當您使用選擇器時，選擇t他現有的H2元素在頁面上，並將其移動

var h2 = $('h2'); // selects all H2 elements on the page 

$(".inner").after(h2); // moves those elements after .inner

來源

2016-08-13 15:49:42 adeneo

爲什麼？移動現有選擇器的原因是什麼？ –

@BharathKumar - 這就是所有DOM操作基本上在JavaScript中工作的方式，當您插入對文檔中已有節點的引用時，它會被移動，但它不會奇蹟般地創建新的節點。 – adeneo

當你在例子中使用$（「選擇」），如果引用的DOM元素，你選擇「H2」的元素。

所以，當你將它附加到另一個元素或使用after（）時，你將該元素自身移動到新的位置。

您可以使用jQuery clone功能克隆所選元素

var clonedH2 = $("h2").clone() 
$("selector").after(clonedH2)

來源

2016-08-13 16:51:20

jquery after（）方法移除DOM元素

回答

相關問題