jQuery: prepend e prependTo

In modo analogo ad append() e appendTo() funzionano prepend() e prependTo().

In questo caso il codice html viene aggiunto prima dell’elemento target e non all’interno come in append.

La differenza è che con prepend() abbiamo prima il target come selettore e poi la stringa come contenuto appeso,

viceversa nel prependTo() abbiamo la stringa per prima e poi l’elemento che deve essere preceduto.

Il codice:

<div id="prepend-placeholder">
<p>Questo contenuto come riferimento</p>
</div>
<button id="prepend">append()</button><br>

<div id="prepend-to-placeholder">
<p>Questo contenuto come riferimento</p>
</div>
<button id="prepend-to">prependTo()</button><br>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$('#prepend').click(function() {
$('#prepend-placeholder').prepend('<p>Testo aggiunto</p>');
});
$('#prepend-to').click(function() {
$('<p>Test prependTo()</p>').prependTo('#prepend-to-placeholder');
});
});
</script>

L'<a href="http://www.lorenzodeambrosis.net/blog/tutorial/08-prepend-prependto.html" target="_blank">esempio</a>