Latest web development tutorials

jQuery aggiungere elementi

Con jQuery, è possibile aggiungere facilmente nuovi elementi / contenuti.

Aggiungere un nuovo contenuto HTML

Impareremo a aggiungere nuovi contenuti per quattro metodo di jQuery:

  • append () - Inserire all'estremità dell'elemento selezionato
  • prepend () - Inserire all'inizio dell'elemento selezionato
  • dopo () - Inserire dopo essere elementi selezionati
  • prima) (- inserire gli elementi selezionati prima

Metodo jQuery append ()

Metodo jQuery append () inserisce il contenuto al termine dell'elemento selezionato.

Esempi

. $ ( "P") append ( " aggiungere testo");

Prova »

Metodo jQuery prepend ()

Metodo jQuery prepend () inserisce il contenuto all'inizio dell'elemento selezionato.

Esempi

. $ ( "P") prepend ( " aggiungere testo all'inizio");

Prova »

Aggiungere diversi nuovi elementi da append () e prepend () metodo

Nell'esempio precedente, siamo solo all'inizio dell'elemento / fine inserire testo / HTML selezionato.

Metodo Tuttavia, aggiungere () e prepend () può ricevere un numero illimitato di elementi nuovi da parte del parametro. È possibile generare un text / HTML (come nell'esempio precedente) per jQuery, o tramite codice JavaScript e elementi DOM.

Nell'esempio seguente, creiamo diversi nuovi elementi. Questi elementi possono essere creati utilizzando text / HTML, jQuery o JavaScript / DOM. Poi aggiungiamo il metodo () di questi nuovi elementi aggiunti al testo (ad anteporre () ugualmente efficaci):

Esempi

funzione appendText () { var txt1 = "<p> testo </ p>."; // crea testo utilizzando i tag HTML var . Txt2 = $ ( "<p > </ p>") del testo ( " text."); // Crea testo utilizzando jQuery var . Txt3 = documento createElement ( "p ") ;. txt3 innerHTML = " testo".; // Crea il testo utilizzando il testo con DOM DOM $ ( "Corpo") append ( txt1, txt2 txt3) ;. // aggiungere il nuovo elemento }

Prova »

jQuery dopo () e prima () metodo

Metodo jQuery dopo () per inserire il contenuto dopo l'elemento selezionato.

Metodo di jQuery prima () prima gli inserimenti degli elementi selezionati.

Esempi

$ ( "Img") dopo ( " dopo il Aggiungi testo") ;. $ ( "Img ") prima ( " aggiungere testo davanti");

Prova »

Con l'aggiunta di una serie di nuovi elementi dopo () e prima () metodo

dopo () e prima () metodo può ricevere un numero illimitato di nuovi elementi mediante il parametro. È possibile creare nuovi elementi tramite text / HTML, jQuery o JavaScript / DOM.

Nell'esempio seguente, creiamo diversi nuovi elementi. Questi elementi possono essere creati utilizzando text / HTML, jQuery o JavaScript / DOM. Abbiamo poi dopo () i metodi di questi nuovi elementi nel testo (di prima () ugualmente efficaci):

Esempi

funzione afterText () { var txt1 = "<b> I < / b>"; // creare elementi utilizzando HTML var txt2 = $ ( "<i> </ i>") del testo ( "amore") ;. // creare elementi utilizzando jQuery var txt3 = documento createElement ( "grande" ) ;. // creare elementi con il DOM txt3 innerHTML = "jQuery!"; . $ ( "img") dopo (txt1, txt2 txt3) ;. // aggiungere testo nell'immagine }

Prova »