jQuery:n elementtien lisääminen

jQuery:n avulla voidaan helposti lisätä uusia elementtejä/sisältöä.

Lisää uutta HTML-sisältöä

Opimme neljä jQuery-metodia, joita käytetään uuden sisällön lisäämiseen:

  • append() - Lisää sisältöä valittujen elementtien loppuun
  • prepend() - Lisää sisältöä valittujen elementtien alkuun
  • after() - Lisää sisältöä valittujen elementtien taakse
  • before() - Lisää sisältöä valittujen elementtien eteen

jQuery append() metodi

jQuery append() metodi lisää sisältöä valittujen elementtien loppuun.

Esimerkki

$("p").append("Lisätty teksti loppuun.");

Kokeile itse

jQuery prepend() metodi

jQuery prepend() metodi lisää sisältöä valittujen elementtien alkuun.

Esimerkki

$("p").prepend("Lisätty teksti ennen.");

Kokeile itse

Lisäämällä useita uusia elementtejä append() ja prepend() metodit

Yllä olevassa esimerkissä lisäämme vain tekstiä/HTML:ää valittujen elementtien alkuun/loppuun.

append() ja prepend() metodit voivat vastaanottaa rajoittamattoman määrän uusia elementtejä. Voimme luoda tekstiä/HTML:ää jQuery:n avulla (kuten yllä olevassa esimerkissä) tai JavaScript-koodin ja DOM-elementtien avulla.

Esimerkissä alla luomme useita uusia elementtejä. Voimme luoda nämä elementit text/HTML:n, jQuery:n tai JavaScript/DOM:n avulla. Lisäksi lisäämme nämä uudet elementit tekstiin käyttäen append()-metodia (prepend() toimii samalla tavalla):

Esimerkki

function lisaaTeksti()
{
var txt1="<p>Teksti.</p>";               // Käyttäen HTML luodaan uusi elementti
var txt2=$("<p></p>").text("Teksti.");   // Käyttäen jQuery luodaan uusi elementti
var txt3=document.createElement("p");  // Luo uusi elementti DOM:n kautta
txt3.innerHTML="Teksti.";
$("p").append(txt1,txt2,txt3);         // Lisää uusi elementti p-elementin loppuun
{}

Kokeile itse

jQuery after() ja before() -menetelmät

jQuery after() -menetelmä lisää sisältöä valitun elementin jälkeen.

jQuery before() -menetelmä lisää sisältöä valitun elementin eteen.

Esimerkki

$("img").after("Jälkien kuvaa tekstit");
$("img").before("Ennen kuvaa tekstit");

Kokeile itse

Lisää useita uusia elementtejä after() ja before() -menetelmillä

after() ja before() -menetelmät voivat ottaa paramettrina rajattomasti uusia elementtejä. Voimme luoda uusia elementtejä text/HTML:n, jQuery:n tai JavaScript/DOM:n kautta.

Seuraavassa esimerkissä luomme useita uusia elementtejä. Voimme luoda uusia elementtejä text/HTML:n, jQuery:n tai JavaScript/DOM:n kautta. Sitten lisäämme uudet elementit tekstiin after() -menetelmän avulla (before() toimii samalla tavalla):

Esimerkki

function afterText()
{
var txt1="<b>I </b>";                    // Luo uusi elementti HTML:n kautta
var txt2=$("<i></i>").text("rakkautta ");     // Luo uusi elementti jQuery:n kautta
var txt3=document.createElement("big");  // Luo uusi elementti DOM:n kautta
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Lisää uusi elementti img:n jälkeen
{}

Kokeile itse

jQuery HTML-viite

Jos haluat täydellisen kuvauksen jQuery HTML-menetelmistä, vieraile seuraavassa viitteessä: