PricingLoginStart free
Frontend Academy · Les

Elementen maken en toevoegen

Gebruik createElement, setAttribute, append en remove om de DOM-structuur dynamisch op te bouwen en te wijzigen.

Les 4 van 413 stappen

Elementen maken en toevoegen is een gratis Frontend Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.

createElement

document.createElement(tagName) maakt een nieuw element in het geheugen — het staat nog niet in de DOM. Vervolgens stel je de eigenschappen in en voeg je het toe aan de boom.

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

parent.append(child) voegt een knooppunt of tekenreeks toe aan het einde van de kinderen van de ouder. appendChild is het oudere equivalent, maar append is flexibeler — het accepteert meerdere knooppunten en tekenreeksen.

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() voegt aan het begin toe. element.before() voegt vóór het element in. element.after() voegt erna in.

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) voegt HTML in op een opgegeven positie zonder bestaande inhoud te vervangen. Posities: '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) maakt een diepe kopie van een element, inclusief alle onderliggende elementen. Geef false door voor een oppervlakkige kopie. Handig om template-elementen te dupliceren.

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

removeChild en remove()

element.remove() verwijdert het element uit de DOM. Het oudere parent.removeChild(child) werkt ook. Verwijderde elementen kunnen nog steeds worden verwezen vanuit variabelen en opnieuw worden toegevoegd.

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

replaceWith

oldElement.replaceWith(newElement) vervangt het oude element in de DOM door het nieuwe. Handiger dan het oudere replaceChild-patroon.

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

DocumentFragment voor batchgewijs invoegen

Een DocumentFragment is een lichtgewicht container die niet in de DOM bestaat. Bouw er een deelboom in en voeg die vervolgens in één bewerking toe — hierdoor ontstaat slechts één herlayout in plaats van 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);

Het element &lt;template&gt;

Het HTML-element <template> bevat opmaak die pas wordt weergegeven nadat deze met JavaScript is gekloond. Dit is beter dan tekenreeksen opbouwen of zichtbare elementen klonen.

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

Eigenschappen instellen tegenover attributen

Elementeigenschappen (el.href, el.src, el.value) zijn vaak de meest directe en efficiënte manier om waarden in te stellen. Attributen (setAttribute) zijn het meest geschikt voor aangepaste of ARIA-attributen waarvoor geen overeenkomstige DOM-eigenschap bestaat.

// 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 vermijden bij gebruikersinhoud

Gebruik bij het opbouwen van elementen uit gegevens van gebruikers altijd DOM-methoden (createElement, textContent, setAttribute) in plaats van een HTML-tekenreeks op te bouwen en innerHTML te gebruiken. Voeg gebruikersinvoer nooit rechtstreeks in HTML-tekenreeksen in.

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

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

Korte controle

Je moet 100 lijstitems toevoegen aan een <ul> zonder 100 herlayouts te veroorzaken. Welke aanpak is het beste?

Beantwoord dit in de interactieve les

Samenvatting: DOM-elementen maken

createElement maakt elementen in het geheugen. append/prepend/before/after voegen ze aan de boom toe. remove() verwijdert een element. DocumentFragment bundelt toevoegingen voor betere prestaties. Het element