jQuery: qual é a diferença entre depois () e insertafter ()

Question

JQuery tem um .after() método, e também um .insertAfter() método.

Qual é a diferença entre eles? Eu acho que posso usar .after() para inserir elementos após um elemento selecionado (ou elementos). Isso está certo? O que é .insertAfter() por?

Answer 1

Eles são opostos mútuos.

'depois'Insira o argumento após o seletor.

'insertafter'Insira o seletor após o argumento.

Aqui está um exemplo da mesma coisa feita com:

insertafter ():

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( "<p>Test</p>" ).insertAfter( ".inner" );
Each inner <div> element gets this new content:
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

depois():

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( ".inner" ).after( "<p>Test</p>" );

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

Answer 2

Eles são inversos um do outro. Conforme explicado no jQuery documentação:

Este:

$("p").insertAfter("#foo");

É o mesmo:

$("#foo").after("p");

E, finalmente, o InsertAfter retorna todos os elementos inseridos, enquanto que .AFter () retornará o contexto em que é chamado.

Answer 3

Todas as respostas até agora são claras como lama ;-) (Então também vou fazer uma facada!)

Se você começar com este HTML:

<p id="pOne">Para 1</p>
<p id="pTwo">Para 2 <span id="sMore">More</span></p>

Depois insere alguns novo Conteúdo após as tags correspondentes:

$("p")                       // Match all paragraph tags
    .after("<b>Hello</b>");  // Insert some new content after the matching tags

O resultado final é:

<p id="pOne">Para 1</p><b>Hello</b>
<p id="pTwo">Para 2 <span id="sMore">More</span></p><b>Hello</b>

Por outro lado, Insertafter move um ou mais elementos que já existem no DOM Após os elementos selecionados (Realmente, esse método poderia ser chamado Moveafter):

$("#sMore")                    // Find the element with id `sMore`
    .insertAfter("#pOne");     // Move it to paragraph one

Resultando em:

<p id="pOne">Para 1</p><span id="sMore">More</span>
<p id="pTwo">Para 2</p>

Answer 4

( depois antes ):

$('selector').after('new_content');
$('selector').before('new_content');

while (insertafter e insertbe antes):

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');

Answer 5

$("p").insertAfter("#foo");

==

$("#foo").after("p")

Answer 6

Verifica a documentação:

$("#foo").after("p")

é o mesmo que:

$("p").insertAfter("#foo");

Answer 7

Depois (conteúdo) retorna: jQuery

Insira o conteúdo após cada um dos elementos correspondentes.

Insertafter (seletor) Retornos: jQuery

Insira todos os elementos correspondentes após outro, especificado, conjunto de elementos.

Answer 8

Parece também que os atributos de aprovação do elemento inserido não funcionam com ".Insertafter", mas funciona com ".After"

funciona:

$('#element').after('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' });

não funciona:

$('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' }).insertAfter('#element');

*Editar: Parece que não funciona com ". Depois" nem, mas apenas com ".Appendto"

Answer 9

Aqui Você pode encontrar um tutorial muito bom de como adicionar conteúdo a uma página usando os métodos jQuery precend (), precendto (), append (), appendto (), antes (), insertBefore (), depois (), insertafter ( ), wrap (), wapall () e wrapinner ()

Answer 10

Depois() e Insertafter () Ambos anexam um elemento, a grande mudança virá para acorrentar

Dentro after() Você está anexando o novo elemento após o seu seletor e, se estiver usando a corrente para o elemento, qualquer função que você usou disparará no selector não no elemento recém -adicionado, e o oposto será realizado em insertAfter() em que o encadeamento será realizado no elemento recém -adicionado, por exemplo,

Depois() e Insertafter ()

Html

<div class="after">After Div</div>
------------------------------------------------------
<div class="insertafter">Insert after div</div>

ROTEIRO

var p='<p>Lorem ipsum doner inut..</p>';
$('.after').after(p)//chaining, performed on .after div not on p
           .css('backgroundColor','pink');
           //you can chain more functions for .after here


$(p).insertAfter('.insertafter')//chaining, performed on p not on .insertafter div
    .css('backgroundColor','yellow');
    // here you can chain more functions for newly added element(p)

Veja acima do selector e contents estão mudando nas duas funções. O mesmo se aplicará na lista de seguintes:

1. antes () vs insertBefore ()
2. append () vs AppendTo ()
3. precend () vs precendto ()
4. e depois () vs insertafter (), obviamente.

Demonstração ao vivo

Se você quiser ver os dois, em termos de desempenho, então after() é mais rápido que insertAfter() Ver Pós-VS-Insertafter-Performance.

Answer 11

Uma coisa importante separa alguma sintaxe é que o vazamento e o desempenho da memória. O Instafter é mais eficiente do que a inserção quando você tem toneladas de elementos DOM. Portanto, prefira o InsertAfter em vez de depois.