Append prima ultimo figlio

Question

Ho un div con l'ID wrapper, e sto usando .append() di inserire alcuni contenuti alla fine di quel div, in questo modo:

$("#wrapper").append('<div class="content"><div class="subcontent">Some stuff</div></div>'); 

Tuttavia, voglio anche la possibilità di inserire un nuovo figlio prima dello l'ultimo content div nel wrapper.

Quindi, se l'output HTML assomiglia a questo:

<div id="wrapper"> 
    <div class="content"> 
     <div class="subcontent"> 
      First 
     </div> 
    </div> 
    <div class="content"> 
     <div class="subcontent"> 
      Second 
     </div> 
    </div> 
</div> 

voglio inserire un elemento prima che l'ultimo, in modo da ottenere questo:

<div id="wrapper"> 
    <div class="content"> 
     <div class="subcontent"> 
      First 
     </div> 
    </div> 
    <div class="content"> 
     <div class="subcontent"> 
      Third 
     </div> 
    </div> 
    <div class="content"> 
     <div class="subcontent"> 
      Second 
     </div> 
    </div> 
</div> 

Come faccio a fare questo?

Answer 1

Si potrebbe utilizzare .before() per aggiungere un fratello prima che l'elemento:

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>'); 

.insertBefore() fa la stessa cosa con una sintassi diversa, e cioè che si seleziona l'elemento da aggiungere, e passare l'elemento che si desidera per aggiungerlo prima.

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="content"> 
 
     <div class="subcontent"> 
 
      First 
 
     </div> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="subcontent"> 
 
      Second 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Selezionare l'ultimo elemento con :last-of-type e utilizzare before() di aggiungere il nuovo elemento:

$('.content:last-of-type').before('<div class="new">test</div>');

.new { color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="content"> 
 
     <div class="subcontent"> 
 
      First 
 
     </div> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="subcontent"> 
 
      Second 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

È possibile utilizzare insertBefore():

$('<div class="content"><div class="subcontent">Some stuff</div></div>').insertBefore('#wrapper > div:last'); 

O before():

$('#wrapper > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>'); 

Answer 4

$("<p>Test</p>").insertBefore("#wrapper > div:last-child"); 

Answer 5

Uso insertBefore:

$('<div class="content"><div class="subcontent">Third</div></div>').insertBefore('#wrapper .content:last'); 

Inserire ogni elemento della serie di elementi corrispondenti prima che il bersaglio.

Demo: http://api.jquery.com/insertBefore/

Answer 6

Puoi last() per la selezione ultima voce, e before() ad apporre

$("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</div></div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class=" content "> 
 
     <div class="subcontent "> 
 
      First 
 
     </div> 
 
    </div> 
 
    <div class="content "> 
 
     <div class="subcontent "> 
 
      Second 
 
     </div> 
 
    </div> 
 
</div>

Answer 7

Questo è come ci sono arrivato:

http://jsfiddle.net/lharby/00tk6avg/

var htmlString = '<div class="content"><div class="subcontent">Some stuff</div></div>' 


$(htmlString).insertBefore('.content:last-child'); 

Answer 8

è possibile utilizzare ennesimo ultimo figlio per selezionare la seconda ultima div. violino: http://jsfiddle.net/08ta9wnL/

html:

<div id="wrapper"> 
    <div class="content"> 
     <div class="subcontent"> 
      First 
     </div> 
    </div> 
    <div class="content"> 
     <div class="subcontent"> 
      Second 
     </div> 
    </div> 
</div> 

javascript:

$(document).ready(function(){ 
    $("#wrapper div:nth-last-child(2)").append('<div class="content"><div class="subcontent">Some stuff</div></div>'); 
}); 

Answer 9

Si può fare in questo modo

$("#wrapper .content:last").before("<div class="content"><div class="subcontent">Some stuff</div></div>");

Date un'occhiata al violino 012.395.