PricingLoginStart free
Frontend Academy · leksjon

Opprette og legge til elementer

Bruk createElement, setAttribute, append og remove til å bygge og endre DOM-strukturen dynamisk.

Leksjon 4 av 413 trinn

Opprette og legge til elementer er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

createElement

document.createElement(tagName) oppretter et nytt element i minnet – det er ikke i DOM-en ennå. Deretter angir du egenskapene og legger det til i treet.

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 og appendChild

parent.append(child) legger en node eller streng til slutten av barna til parent. appendChild er det eldre tilsvarende alternativet, men append er mer fleksibel – den godtar flere noder og strenger.

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() legger til i starten. element.before() setter inn før elementet. element.after() setter inn etter det.

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) setter inn HTML på en angitt plassering uten å erstatte eksisterende innhold. Plasseringer: '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) oppretter en dyp kopi av et element, inkludert alle underordnede elementer. Angi false for en grunn kopi. Nyttig for å duplisere mal-elementer.

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

removeChild og remove()

element.remove() fjerner elementet fra DOM-en. Den eldre parent.removeChild(child) fungerer også. Fjernede elementer kan fortsatt refereres til via variabler og legges tilbake.

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

replaceWith

oldElement.replaceWith(newElement) erstatter det gamle elementet i DOM-en med det nye. Mer praktisk enn det eldre replaceChild-mønsteret.

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

DocumentFragment for satsvise innsettinger

En DocumentFragment er en lettvektsbeholder som ikke finnes i DOM-en. Bygg et deltre i den, og legg det deretter til i én operasjon — dette utløser bare én reflow i stedet for N.

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);

Elementet &lt;template&gt;

HTML-elementet <template> inneholder markup som ikke gjengis før det klones med JavaScript. Bedre enn å bygge strenger eller klone synlige elementer.

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

Angi egenskaper kontra attributter

Elementegenskaper (el.href, el.src, el.value) er ofte den mest direkte og effektive måten å angi verdier på. Attributter (setAttribute) er best for egendefinerte eller ARIA-attributter som ikke har en tilsvarende DOM-egenskap.

// 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');

Unngå innerHTML med brukerinnhold

Når du bygger elementer fra data levert av brukeren, må du alltid bruke DOM-metoder (createElement, textContent, setAttribute) i stedet for å bygge en HTML-streng og bruke innerHTML. Sett aldri brukerinput inn i HTML-strenger ved interpolering.

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

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

Hurtigsjekk

Du må legge til 100 listeelementer i en <ul> uten å utløse 100 reflows. Hvilken fremgangsmåte er best?

Besvar den i den interaktive leksjonen

Oppsummering: Opprette DOM-elementer

createElement oppretter i minnet. append/prepend/before/after setter inn i treet. remove() fjerner et element. DocumentFragment samler innsettinger for bedre ytelse. Elementet