Gli ultimi tutorial di sviluppo web
 

jQuery - Aggiungere elementi

❮ Precedente Successivo Capitolo ❯

Con jQuery, è facile aggiungere nuovi elementi / contenuti.

Aggiungere nuovi contenuti HTML

Prenderemo in esame quattro metodi jQuery che vengono utilizzati per aggiungere nuovi contenuti:

  • append() - tenore Inserti alla fine degli elementi selezionati
  • prepend() - tenore Inserti all'inizio degli elementi selezionati
  • after() - inserisce oggetti dopo gli elementi selezionati
  • before() - tenore Inserti prima che gli elementi selezionati

jQuery append() Metodo

Il jQuery append() metodo inserisce contenuti ALLA FINE degli elementi HTML selezionati.

Esempio

$("p").append("Some appended text.");
Prova tu stesso "

jQuery prepend() Metodo

Il jQuery prepend() metodo inserisce contenuti All'inizio degli elementi HTML selezionati.

Esempio

$("p").prepend("Some prepended text.");
Prova tu stesso "

Aggiungere diversi nuovi elementi con append() e prepend()

In entrambi gli esempi di cui sopra, abbiamo inserito solo una parte di testo / HTML all'inizio / fine degli elementi HTML selezionati.

Tuttavia, sia la append() e prepend() metodi possono prendere un numero infinito di nuovi elementi come parametri. I nuovi elementi possono essere generati con text / HTML (come abbiamo fatto negli esempi precedenti), con jQuery, oppure con il codice JavaScript e elementi DOM.

Nell'esempio seguente, creiamo diversi nuovi elementi. Gli elementi vengono creati con testo / HTML, jQuery, e JavaScript / DOM. Poi aggiungiamo i nuovi elementi al testo con l' append() metodo (questo avrebbe lavorato per prepend() troppo):

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.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
Prova tu stesso "

jQuery after() e before() Metodi

Il jQuery after() metodo inserisce contenuto dopo gli elementi HTML selezionati.

Il jQuery before() metodo inserisce contenuto prima gli elementi HTML selezionati.

Esempio

$("img").after("Some text after");

$("img").before("Some text before");
Prova tu stesso "

Aggiungere diversi nuovi elementi con after() e before()

Inoltre, sia il after() e before() metodi possono assumere un numero infinito di nuovi elementi come parametri. I nuovi elementi possono essere generati con text / HTML (come abbiamo fatto nell'esempio di cui sopra), con jQuery, oppure con il codice JavaScript e elementi DOM.

Nell'esempio seguente, creiamo diversi nuovi elementi. Gli elementi vengono creati con testo / HTML, jQuery, e JavaScript / DOM. Poi inseriamo i nuovi elementi al testo con il after() metodo (questo avrebbe lavorato per before() troppo):

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>
}
Prova tu stesso "

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»

jQuery HTML Reference

Per una panoramica completa di tutti i metodi di jQuery HTML, si prega di visitare il nostro / CSS di riferimento jQuery HTML .


❮ Precedente Successivo Capitolo ❯