Du har en handleliste på nettsiden, og brukeren skriver inn "melk" i et tekstfelt og klikker på en knapp. Nå skal "melk" dukke opp som et nytt punkt i listen. Men det finnes ikke noe ferdig li-element i HTML-filen for akkurat den varen. Du må lage det fra bunnen av i JavaScript. Med createElement bygger du nye HTML-elementer, fyller dem med innhold, og fester dem til siden, alt uten å røre HTML-filen.
Slik fungerer createElement i JavaScript
document.createElement tar navnet på HTML-taggen du vil lage som argument. Skriver du document.createElement("li"), får du tilbake et helt nytt li-element. Det elementet eksisterer bare i JavaScript, det er ikke synlig på siden ennå.
Tenk på det som å bygge en lego-kloss utenfor modellen. Klossen finnes, men den sitter ikke fast noe sted. Du kan endre den, legge til innhold, og style den. Først når du fester den til et element på siden, blir den synlig for brukeren.
createElement JavaScript fungerer med alle gyldige HTML-tagger. Du kan lage h2-elementer, p-elementer, div-elementer, a-elementer, og alt annet nettleseren forstår.
Legge innhold i det nye elementet
Et nyopprettet element er tomt. Det har ingen tekst, ingen attributter utover standard, og ingen barn-elementer. Du fyller det med innhold på samme måte som du endrer eksisterende elementer.
innerHTML setter HTML-innholdet mellom åpnings- og lukketaggen. Skriver du element.innerHTML = "Melk", får elementet teksten "Melk" inni seg. Skal elementet inneholde HTML-markup, kan du skrive det rett inn: element.innerHTML = "<strong>Melk</strong>" gir et element med fet tekst.
For ren tekst uten markup kan du bruke textContent i stedet. Den behandler alt som tekst og vil ikke tolke HTML-tagger. Det er tryggere når innholdet kommer fra brukerinput, fordi det hindrer at noen kan injisere HTML-kode gjennom et tekstfelt.
Feste elementet til siden med appendChild
For at det nye elementet skal vises på siden, må du feste det til et eksisterende element. appendChild er metoden du bruker. Du kaller den på forelderelementet og sender det nye elementet som argument.
Har du valgt en ul med querySelector, og laget et nytt li med createElement, skriver du ul.appendChild(li). Det nye li-elementet legges til sist i listen, etter alle eksisterende listepunkter.
appendChild plasserer alltid det nye elementet sist blant barna til forelderen. Skal du sette det inn et bestemt sted i stedet, finnes metoden insertBefore. Den tar to argumenter: det nye elementet og elementet det skal plasseres foran.
Fjerne elementer med removeChild
Det du kan legge til, kan du også ta bort. removeChild fjerner et barn-element fra forelderen. Du kaller metoden på forelderelementet og sender inn barnet som argument.
For å fjerne et li-element fra en ul, skriver du ul.removeChild(li). Elementet forsvinner fra siden umiddelbart. Det eksisterer fortsatt i JavaScript-variabelen, men det er ikke lenger en del av DOM-treet.
Du kan også fjerne elementer som allerede fantes i HTML-filen. removeChild skiller ikke mellom elementer du opprettet med JavaScript og elementer som var kodet inn fra starten. Velg elementet, kall removeChild på forelderen, og det forsvinner.
Hente data fra brukeren
Å lage elementer manuelt i koden er nyttig for å forstå teknikken, men den virkelige verdien kommer når elementene bygges basert på brukerinput. Input-elementer i HTML har en value-egenskap som inneholder teksten brukeren har skrevet inn.
Du velger input-feltet med querySelector, leser verdien med .value, og bruker den som innhold i det nye elementet. Etter at du har lest verdien, kan du nullstille feltet ved å sette .value til en tom streng. Da er feltet klart for neste input.
Kobler du dette sammen med en eventlistener på en knapp, har du en komplett flyt: brukeren skriver tekst, klikker knappen, et nytt element opprettes med teksten, og feltet tømmes.
Bygge mer komplekse elementer
createElement er ikke begrenset til enkle elementer med ren tekst. Du kan lage et element, gi det klasser med classList, sette attributter med setAttribute, og legge til barn-elementer med appendChild. Bygger du steg for steg, kan du lage vilkårlig komplekse HTML-strukturer fra JavaScript.
Et vanlig mønster er å lage et ytre element, fylle det med flere indre elementer, og deretter feste det ytre elementet til siden. Da skjer bare en enkelt DOM-oppdatering, som er mer effektivt enn å legge til mange elementer separat.
For eksempel kan du lage et div-element, legge til en h3, et p-element og en knapp inne i det, og til slutt feste hele div-en til main-elementet. Brukeren ser alt dukke opp på en gang.
Vanlige feil med createElement
Glemmer appendChild. Du lager elementet og fyller det med innhold, men glemmer å feste det til siden. Elementet finnes i koden, men brukeren ser ingenting. Sjekk alltid at du kaller appendChild (eller en tilsvarende metode) etter at elementet er klart.
Feil på forelderelementet. appendChild kalles på forelderen, ikke på det nye elementet. Skriver du nyElement.appendChild(foreldreElement), snur du relasjonen. Det nye elementet blir forelder, og det eksisterende elementet blir barn. Resultatet er som regel en krasjet side.
Skrivefeil i tagnavn. createElement("dvi") gir deg et element med en ukjent tag. Nettleseren klager ikke, men elementet oppfører seg ikke som en div. Sjekk stavingen hvis elementet ikke ser ut som forventet.
Neste steg med dynamiske elementer
Nå kan du opprette, fylle og feste elementer til siden med createElement JavaScript. Det neste steget er å koble opprettelsen til brukerhandlinger med events, slik at elementene lages når brukeren klikker, skriver, eller interagerer med siden. Du bør også se nærmere på MDN-dokumentasjonen for createElement for å utforske flere muligheter.
I kurset JavaScript for nybegynnere med instruktør Lars Vidar Nordli bygger du en handleliste-app fra bunnen av. Der kombineres createElement med eventlisteners, input-felter og classList for å lage en fungerende app der brukeren kan legge til og fjerne varer dynamisk.
