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元素

回答

相关问题