Lezione #id-jq-2013-0009#
JQuery ci permette di aggiungere dinamicamente dei contenuti testuali alla nostra pagina web, vediamo come con alcuni semplici esempi..

Metodo: append() -> aggiunta di contenuto all’interno dell’elemento selezionato, alla fine

Vediamo il seguente codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
  
<head>
<title>Titolo del documento</title>
 
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
 
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    $("p").append("<b>, questo testo &eacute; aggiunto dinamicamente</b>.");
  });
});
</script>
 
</head>
  
<body>
 
<p>Questo è un paragrafo</p>
<button id="button1">Cliccami per vedere in azione append()</button>
 
</body>
  
</html>

Che traducendo:
1- $(document).ready(function(){ -> JQuery verifica che tutto il documento sia caricato
2- $(“#button1”).click(function(){ -> al click sull’elemento con id=button1
3- $(“p”).append(“…”); -> aggiungi all’interno del tag – p – il contenuto fra le virgolette.

La sintassi completa è:

1
$("elemento selezionato").append("Testo da aggiungere");

Metodo: prepend() -> aggiunta di contenuto all’interno dell’elemento selezionato, all’inizio

La sintassi completa è:

1
$("elemento selezionato").prepend("Testo da aggiungere");

Metodo: before() -> aggiunta di contenuto all’esterno dell’elemento selezionato, prima dell’elemento selezionato.

La sintassi completa è:

1
$("elemento selezionato").before("Testo da aggiungere");

Metodo: after() -> aggiunta di contenuto all’esterno dell’elemento selezionato, dopo l’elemento selezionato.

La sintassi completa è:

1
$("elemento selezionato").after("Testo da aggiungere");

Tutti questi metodi possono essere utilizzati in modo complesso per generare del contenuto, ad esempio:

1
2
3
4
5
6
7
8
function appendText()
{
var txt1="<p>Text.</p>";               // Crea un elemento con HTML 
var txt2=$("<p></p>").text("Text.");   // Crea con jQuery
var txt3=document.createElement("p");  // Crea DOM (Document Object Model)
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Aaggiungi la somma degli elementi
}

Ora che è tutto chiaro mettiamo insieme le varie tecniche:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
  
<head>
<title>Titolo del documento</title>
 
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
 
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    $("p").append("<b>Questo testo &eacute; aggiunto dinamicamente con append.</b>");
  });
  $("#button2").click(function(){
    $("p").prepend("<b>Questo testo &eacute; aggiunto dinamicamente con prepend.</b>");
  });
  $("#button3").click(function(){
    $("p").before("<b>Questo testo &eacute; aggiunto dinamicamente con before.</b>");
  });
  $("#button4").click(function(){
    $("p").after("<b>Questo testo &eacute; aggiunto dinamicamente con after.</b>");
  });
});
</script>
 
</head>
  
<body>
 
<p> - Questo è un paragrafo - </p>
<div>
<button id="button1">Cliccami per vedere in azione append()</button>
<button id="button2">Cliccami per vedere in azione prepend()</button>
<button id="button3">Cliccami per vedere in azione before()</button>
<button id="button4">Cliccami per vedere in azione after()</button>
</div>
</body>
  
</html>

Vedi il codice in azione! >

Il mio sito ufficiale>