before-metodi

before-metodi lisää tekstin ennen määritettyä elementtiä. On olemassa myös insertBefore-metodi, joka toimii vastaavalla tavalla.

Syntaksi

Tekstin lisääminen elementin eteen:

javascript$(valitsin).before(teksti);

Näin valittujen elementtien eteen lisätään teksti, jonka palauttaa käyttäjän määrittämä funktio:

javascript$(valitsin).before(function(indeksi joukossa));

Toinen tapa käyttää funktiota, toisena parametrina annetaan elementin vanha html -arvo:

javascript$(valitsin).before(function(indeksi joukossa, html-merkkijono));

Teksti voi olla paitsi tavallista tekstiä, myös DOM-elementti tai jQuery-objekti. Tässä tapauksessa nämä elementit siirretään niiden alkuperäiseltä paikalta HTML-koodissa.

Esimerkki

Lisätään teksti ennen määritettyä kappaletta:

html<p id="test">teksti</p>

javascript$('#test').before('!!!');

HTML-koodi näyttää tältä:

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

Esimerkki

Lisätään teksti tageineen ennen määritettyä kappaletta:

html<p id="test">teksti</p>

javascript$('#test').before('<p>!!!</p>');

HTML-koodi näyttää tältä:

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

Esimerkki

Asetetaan yksi kappale toisen yläpuolelle (eli leikataan kappale vanhalta paikalta ja asetetaan uudelle paikalle):

html<p id="p1">teksti1</p>
<p id="p2">teksti2</p>

javascript$('#p2').before($('#p1'));

HTML-koodi näyttää tältä:

html<p id="p1">teksti1</p>
<p id="p2">teksti2</p>

Katso myös