PricingLoginStart free
Frontend Academy · Oppitunti

Elementtien luominen ja liittäminen

Rakenna ja muokkaa DOM-rakennetta dynaamisesti createElement-, setAttribute-, append- ja remove-metodeilla.

Oppitunti 4/413 vaihetta

Elementtien luominen ja liittäminen on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

createElement

document.createElement(tagName) luo uuden elementin muistiin — elementti ei vielä ole DOMissa. Sen jälkeen asetatte sen ominaisuudet ja liitätte sen puuhun.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append ja appendChild

parent.append(child) lisää solmun tai merkkijonon parent-elementin lasten loppuun. appendChild on vanhempi vastine, mutta append on joustavampi — se hyväksyy useita solmuja ja merkkijonoja.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend() lisää alkuun. element.before() lisää ennen elementtiä. element.after() lisää sen jälkeen.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) lisää HTML-koodia määritettyyn kohtaan korvaamatta olemassa olevaa sisältöä. Sijainnit: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true) luo elementistä syvän kopion, joka sisältää kaikki sen lapset. Välittäkää false matalaa kopiota varten. Tämä on hyödyllistä mallielementtien monistamisessa.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild ja remove()

element.remove() poistaa elementin DOM-puusta. Myös vanhempi parent.removeChild(child) toimii. Poistettuihin elementteihin voidaan edelleen viitata muuttujilla ja ne voidaan lisätä uudelleen.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement) korvaa vanhan elementin DOM-puussa uudella. Se on kätevämpi kuin vanhempi replaceChild-malli.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment eräkohtaisia lisäyksiä varten

DocumentFragment on kevyt säilö, jota ei ole DOM-puussa. Rakentakaa sen sisään alipuu ja liittäkää se sitten yhdellä toiminnolla — tämä aiheuttaa vain yhden reflow'n N:n sijaan.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

Elementti &lt;template&gt;

HTML:n <template>-elementti sisältää merkintää, jota ei renderöidä ennen kuin se kloonataan JavaScriptillä. Se on parempi vaihtoehto kuin merkkijonojen rakentaminen tai näkyvien elementtien kloonaaminen.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Ominaisuuksien ja attribuuttien asettaminen

Elementin ominaisuudet (el.href, el.src, el.value) ovat usein suorin ja suorituskykyisin tapa asettaa arvoja. Attribuutit (setAttribute) sopivat parhaiten mukautetuille tai ARIA-attribuuteille, joilla ei ole vastaavaa DOM-ominaisuutta.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

innerHTML:n välttäminen käyttäjäsisällön kanssa

Kun elementtejä rakennetaan käyttäjän antamista tiedoista, käyttäkää aina DOM-metodeja (createElement, textContent, setAttribute) sen sijaan, että rakentaisitte HTML-merkkijonon ja käyttäisitte innerHTML:ää. Älkää koskaan upottako käyttäjän syötettä HTML-merkkijonoihin.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

Pikatarkistus

Teidän on lisättävä 100 luettelokohdetta kohteeseen <ul> aiheuttamatta 100 reflow'ta. Mikä lähestymistapa on paras?

Vastaa interaktiivisessa oppitunnissa

Kertaus: DOM-elementtien luominen

createElement luo elementin muistiin. append/prepend/before/after lisäävät sen puuhun. remove() poistaa elementin. DocumentFragment kokoaa lisäykset suorituskyvyn parantamiseksi.