jQuery: come restituire l'elemento aggiunto

Question

Io uso jQuery API append() per aggiungere un nuovo elemento:

$(selector).append('<div class="test"></div>')

voglio l'espressione restituire l'elemento appena aggiunto per la mia ulteriore uso, tuttavia restituisce $(selector). Quindi, come posso consentire a jQuery di restituire l'elemento appena aggiunto per evitare di ri-selezionarlo?

Answer 1

Credo che il modo per farlo sarebbe quello di utilizzare appendTo()

Poi si potrebbe fare

$('<div class="test"></div>').appendTo(selector).css('background','blue'); 

o qualsiasi altra cosa si voleva fare.

Ciò farebbe sì che lo div abbia appena aggiunto uno sfondo blu.

Answer 2

È possibile memorizzare solo un riferimento ad esso. Tieni presente che dovresti eseguire tutte le tue manipolazioni con $div prima di aggiungerlo a un elemento che fa parte di DOM per evitare più riflussi.

var $div = $('<div class="test"></div>'); 

$(selector).append($div); 

Answer 3

È possibile creare l'elemento indipendentemente dal append passando la stringa html al jQuery function:

$('<div class="test"></div>'); 

È possibile utilizzare che sia in append

$(selector).append(/* $div = */$('<div class="test"></div>').…); 

o con appendTo

/* $div = */$('<div class="test"></div>').appendTo(selector).… ; 

o li separi in due dichiarazioni.

Answer 4

Anche questo può funzionare.

<div class="inner">hellworld</div> 
$('.inner').append('<p>paragraph</p>'); 

questo inserirà due nuovi s ed uno esistente come gli ultimi tre nodi figlio del corpo

var $newdiv1 = $('<div id="object1"/>'), 
newdiv2 = document.createElement('div'), 
existingdiv1 = document.getElementById('foo'); 
$('body').append($newdiv1, [newdiv2, existingdiv1]); 

Answer 5

forse si può provare sia

var elt = $('<div class="test"></div>'); 
$(selector).append(elt); 

o utilizzando appendTo invece di accodamento e quindi concatenare tutto ciò che è necessario (show() nell'esempio seguente)

$('<div class="test"></div>').appendTo($(selector)).show() 

Answer 6

Si prega di provare questo

$(selector).append('<div class="test"></div>').find('div.test:last-child') 

Answer 7

È possibile restituirlo aggiungere da childern funzione di jQuery come in questo esempio jsfiddle

$(selector).append('<div class="test"></div>').children('.test'); 

oppure è possibile utilizzare prependTO funzione di jQuery come in questo esempio jsfiddle:

$('<div class="test"></div>').prependTo(selector);