jQuery: le funzioni after() e before()

Possiamo decidere di inserire dei contenuti nella nostra pagina anche prima o dopo un elemento preciso, faremo ricorso per questa operazione alle funzioni after() e before().

Nell’html predisponiamo un div e due bottoni sui quali mapperemo l’evento click.

<div id="target">
<button id="before">before()</button><br>
<button id="after">after()</button><br>
</div>

Per inserire dei contenuti prima del div target utilizzeremo la funzione before associata al medesimo pulsante, per inserire dopo useremo la funzione after:

$(document).ready(function() {
$('#before').click(function() {
$('#target').before('<p>Before</p>');
});
$('#after').click(function() {
$('#target').after('<p>After</p>');
});
});

L’esempio