createElement-metodi

Metodi createElement mahdollistaa uuden elementin luomisen antamalla parametrina tagin nimen. Luomisen jälkeen elementtiin voidaan työskennellä kuin tavalliseen elementtiin, ja se voidaan myös lisätä sivuille metodeilla prepend, append, appendChild, insertBefore tai insertAdjacentElement.

Jos createElement:in toiminnan tulos kirjoitetaan muuttujaan, tässä muuttujassa on sellainen elementti, aivan kuin olisimme saaneet sen querySelector:in tai getElementById:n kautta. Ainoa ero - elementtiämme ei ole sijoitettu sivulle. Mutta voimme muuttaa sille innerHTML:ää, attribuutteja, lisätä tapahtumankäsittelijöitä ja lopulta sijoittaa sen sivulle.

Syntaksi

javascriptdocument.createElement('tagin nimi');

Esimerkki

Luodaan kappale, asetetaan sille teksti ja sijoitetaan se sivun #parent-lohkon loppuun:

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

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>

Esimerkki

Annettu ul. Siirretään siihen 9 li-tagia, ja tehdään niiden tekstistä järjestysnumerot:

html<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  parent.appendChild(li);
}

Koodin suorituksen tulos:

html<ul id="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

Esimerkki

Lisätään elementteihin tapahtumankäsittelijöitä niitä lisättäessä:

html<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  
  li.addEventListener('click', function() {
    alert(this.textContent);
  });
  
  parent.appendChild(li);
};

Результат:

Katso myös