La differenza principale tra append () e appendTo () è che la prima funziona sul target con l’html come un argomento, la seconda funziona in html con il target come argomento. La funzione append() attribuisce il contenuto alla selezione da cui è chiamata mentre l’appendTo() funziona in senso inverso: il contenuto che verrà inserito viene utilizzato come selettore. Per gli argomenti di append() e appendTo() le funzioni di aggiunta sono in grado di prendere elementi DOM HTML, stringhe, oggetti jQuery, e una funzione. Attenzione: se avete bisogno di aggiungere molti elementi HTML, è meglio unire prima il codice HTML in un più ampia stringa e aggiungerla in una singola chiamata. Lavorare con la funzione append() e appendTo() sull’albero documento html rende le manipolazioni relativamente lente.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery filter</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$(document).ready(function(e) {
$('#btn1').click(function() {$('#box1').append('<p>Testo 1</p>');});
$('#btn2').click(function() {$('<p>Testo 2</p>').appendTo('#box2');});
});
</script>
<style>
div{border:1px solid #000; width:200px; height:100px; padding:5px; margin:5px;}
</style>
</head>
<body>
<input type="button" id="btn1" value="btn1">
<input type="button" id="btn2" value="btn2">
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
L’esempio
