jQuery - Aggiungi elementi
Con jQuery, è facile aggiungere nuovi elementi/contenuti.
Aggiungi nuovo contenuto HTML
Esamineremo quattro metodi jQuery utilizzati per aggiungere nuovi contenuti:
append()- Inserisce il contenuto alla fine degli elementi selezionatiprepend()- Inserisce il contenuto all'inizio degli elementi selezionatiafter()- Inserisce il contenuto dopo gli elementi selezionatibefore()- Inserisce il contenuto prima degli elementi selezionati
jQuery metodo append()
Il metodo jQuery append()inserisce il contenuto ALLA FINE degli elementi HTML selezionati.
Esempio
$("p").append("Some appended text.");
jQuery prepend() metodo
Il metodo jQuery prepend()inserisce il contenuto ALL'INIZIO degli elementi HTML selezionati.
Esempio
$("p").prepend("Some prepended text.");
Aggiungi diversi nuovi elementi con append() e prepend()
In entrambi gli esempi precedenti, abbiamo inserito solo del testo/HTML all'inizio/alla fine degli elementi HTML selezionati.
Tuttavia, entrambi i metodi append()e prepend()possono accettare un numero infinito di nuovi elementi come parametri. I nuovi elementi possono essere generati con testo/HTML (come abbiamo fatto negli esempi precedenti), con jQuery o con codice JavaScript ed elementi DOM.
Nell'esempio seguente creiamo diversi nuovi elementi. Gli elementi vengono creati con testo/HTML, jQuery e JavaScript/DOM. Quindi aggiungiamo i nuovi elementi al testo con il append()metodo (anche questo avrebbe funzionato
prepend()):
Esempio
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
jQuery metodi after() e before()
after()Il metodo jQuery inserisce il contenuto DOPO gli elementi HTML selezionati.
Il metodo jQuery before()inserisce il contenuto PRIMA degli elementi HTML selezionati.
Esempio
$("img").after("Some text after");
$("img").before("Some text before");
Aggiungi diversi nuovi elementi con after() e before()
Inoltre, entrambi i metodi after()e before()possono accettare un numero infinito di nuovi elementi come parametri. I nuovi elementi possono essere generati con testo/HTML (come abbiamo fatto nell'esempio sopra), con jQuery o con codice JavaScript ed elementi DOM.
Nell'esempio seguente creiamo diversi nuovi elementi. Gli elementi vengono creati con testo/HTML, jQuery e JavaScript/DOM. Quindi inseriamo i nuovi elementi nel testo con il after()metodo (anche questo avrebbe funzionato
before()):
Esempio
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
Esercizi jQuery
Riferimento HTML jQuery
Per una panoramica completa di tutti i metodi HTML jQuery, vai al nostro Riferimento HTML/CSS jQuery .