JavaScript Academy · Oppitunti

Elementtien luominen ja lisääminen

Luokaa uusia solmuja createElementilla ja appendilla.

Oppitunti 2/413 vaihetta

Elementtien luominen ja lisääminen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Uusien elementtien luominen

HTML-merkkijonojen kirjoittamisen sijaan voitte luoda elementtejä koodissa. Näin vältätte XSS-riskin ja saatte käyttöönne oikean elementtiviitteen sen määrittämistä varten.

createElement

document.createElement luo uuden irrallisen elementin. Se on olemassa muistissa, mutta ei vielä sivulla.

const li = document.createElement("li");
li.textContent = "New item";

Asetusten määrittäminen ennen lisäämistä

Voitte määrittää luokat, attribuutit ja sisällön elementin ollessa vielä irrotettuna. Elementti tulee näkyviin vasta, kun lisäätte sen.

const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";

append

append lisää solmut (tai merkkijonot) elementin viimeisiksi lapsisolmuiksi. Se voi ottaa useita argumentteja.

const list = document.querySelector("ul");
list.append(li);

prepend

prepend lisää solmut ensimmäisiksi lapsisolmuiksi, jolloin olemassa olevat lapsisolmut siirtyvät alaspäin.

list.prepend(document.createElement("li"));

append hyväksyy merkkijonot

Toisin kuin vanhempi appendChild, append voi ottaa tavallisia merkkijonoja ja useita argumentteja kerralla.

const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");

appendChild

appendChild on perinteinen menetelmä. Se hyväksyy vain yhden solmun ja palauttaa sen, kun taas append palauttaa undefined.

const node = list.appendChild(document.createElement("li"));

insertBefore

insertBefore sijoittaa uuden solmun tietyn olemassa olevan lapsisolmun eteen, joten sijainti voidaan määrittää tarkasti.

const ref = list.children[1];
list.insertBefore(li, ref);

insertAdjacentElement

insertAdjacentElement lisää elementin suhteessa toiseen elementtiin käyttäen sijainteja, kuten beforebegin, afterbegin, beforeend ja afterend.

ref.insertAdjacentElement("beforebegin", li);

DocumentFragment eräajoihin

Kun lisäätte useita elementtejä, rakentakaa ne ensin DocumentFragment-olioon ja lisätkää olio vasta sitten. Tämä vähentää uudelleenpiirtoja ja nopeuttaa toimintaa.

const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
  const item = document.createElement("li");
  item.textContent = "Row " + i;
  frag.append(item);
}
list.append(frag);

cloneNode

cloneNode(true) kopioi elementin ja sen jälkeläiset, joten se sopii toistuvien rakenteiden luomiseen mallin pohjalta.

const copy = li.cloneNode(true);
list.append(copy);

Pikatarkistus

Valitkaa paras tekniikka.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Käyttäkää createElement-menetelmää irrotettujen elementtien luomiseen ja määrittäkää niiden asetukset. Lisätkää ne sitten menetelmillä append/prepend (merkkijonot ja useat argumentit sallitaan), appendChild (yksi solmu) tai insertBefore/insertAdjacentElement (tarkat sijainnit). Käsitelkää useat lisäykset eränä DocumentFragment-olion avulla ja käyttäkää rakenteita uudelleen cloneNode(true)-menetelmällä.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Elementtien luominen ja lisääminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Elementtien luominen ja lisääminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Elementtien luominen ja lisääminen”?

Luokaa uusia solmuja createElementilla ja appendilla. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Elementtien luominen ja lisääminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy