Metodo before

Il metodo before aggiunge testo prima dell'elemento specificato. Esiste anche il metodo insertBefore, che funziona in modo analogo.

Sintassi

Inserire testo prima di un elemento:

javascript$(selettore).before(testo);

In questo modo, prima degli elementi selezionati verrà aggiunto il testo che sarà restituito dalla funzione personalizzata:

javascript$(selettore).before(function(indice nell'insieme));

Un'altra variante di utilizzo della funzione, il secondo parametro specifica il vecchio valore html dell'elemento:

javascript$(selettore).before(function(indice nell'insieme, stringa html));

Il testo può essere non solo testo semplice ma anche un elemento DOM o un oggetto jQuery. In questo caso, questi elementi verranno spostati dalla loro posizione nel codice HTML.

Esempio

Inseriamo del testo prima del paragrafo specificato:

html<p id="test">testo</p>
javascript$('#test').before('!!!');

Il codice HTML diventerà così:

html!!!<p id="test">testo</p>

Esempio

Inseriamo del testo con dei tag prima del paragrafo specificato:

html<p id="test">testo</p>
javascript$('#test').before('<p>!!!</p>');

Il codice HTML diventerà così:

html<p>!!!</p><p id="test">testo</p>

Esempio

Posizioniamo un paragrafo sopra l'altro (cioè tagliamo il paragrafo dalla sua vecchia posizione e lo mettiamo in una nuova):

html<p id="p1">testo1</p>
<p id="p2">testo2</p>
javascript$('#p2').before($('#p1'));

Il codice HTML diventerà così:

html<p id="p1">testo1</p><p id="p2">testo2</p>

Vedi anche

  • metodo insertBefore,
    che aggiunge testo prima dell'elemento specificato
  • metodi after, append, prepend,
    che consentono di aggiungere contenuti in un punto specifico della pagina
  • metodo clone,
    che crea copie degli elementi selezionati