Elementtien luominen ja lisääminen JavaScriptillä

Nyt opimme luomaan uusia DOM-elementtejä JavaScriptin avulla ja sitten lisäämään ne sivulle. Tätä varten on tarkoitettu metodi createElement. Tämän menetelmän parametrina tulee välittää luotavan tagin nimi.

Jos createElement:n tuloksen tallentaa muuttujaan, tässä muuttujassa on elementti, aivan kuin olisimme saaneet sen querySelector:n kautta.

Ainoa ero - elementtiämme ei ole sijoitettu sivulle. Mutta muuten voimme muuttaa sille tekstiä, attribuutteja, lisätä tapahtumankäsittelijöitä ja lopulta sijoittaa sen sivulle.

Uuden elementin sijoittamiseen sivulle käytetään metodia appendChild. Tätä metodia tulee käyttää sille elementille, jonka sisään haluamme laittaa elementtimme. Ja menetelmän parametrina tulee välittää uusi elementtimme, joka on aiemmin luotu createElement:n kautta.

Katsotaan käytännön esimerkkiä. Oletetaan että meillä on div, ja sen sisällä - useita kappaleita:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Luodaan kappale, asetetaan sille teksti ja sijoitetaan sivulle lohkon #parent loppuun:

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Koodin suorituksen tulos:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>!</p>
</div>

html<ol id="elem"></ol>

html<ol id="elem"></ol>
<button id="button">click me</button>