DOM Manipulatie

Wat is DOM manipulatie?

Met DOM manipulatie kun je HTML-elementen aanmaken, aanpassen en verwijderen via JavaScript — zonder de pagina te herladen.

// innerHTML: overschrijft alles wat er al stond
const lijst = document.querySelector('#mijn-lijst');
lijst.innerHTML = '<li>Item 1</li><li>Item 2</li>';

// createElement: voegt toe aan bestaande inhoud
const nieuwItem = document.createElement('li');
nieuwItem.textContent = 'Item 3';
lijst.appendChild(nieuwItem);

createElement()

Met createElement() maak je een nieuw HTML-element aan. Je geeft de tagnaam mee als string.

// Maak een nieuw <li> element aan
const nieuwItem = document.createElement('li');

// Maak een nieuw <p> element aan
const nieuweParagraaf = document.createElement('p');

// Maak een nieuw <button> element aan
const nieuweKnop = document.createElement('button');

Tekst toevoegen aan een element

Nadat je een element hebt aangemaakt, voeg je tekst toe met textContent of innerHTML.

const nieuwItem = document.createElement('li');

// Tekst toevoegen (aanbevolen voor platte tekst):
nieuwItem.textContent = 'Nieuw taak item';

// HTML toevoegen (als je opmaak wilt):
nieuwItem.innerHTML = '<strong>Belangrijk item</strong>';

Andere eigenschappen instellen

const knop = document.createElement('button');
knop.textContent = 'Verwijder';

// CSS klasse toevoegen
knop.className = 'verwijder-knop';

// ID instellen
knop.id = 'mijn-knop';

// Data-attribuut instellen
knop.dataset.index = 3;

appendChild()

Met appendChild() voeg je een aangemaakt element toe aan een bestaand element in de DOM. Het nieuwe element wordt als laatste kind toegevoegd.

// HTML:
// <ul id="taken-lijst"></ul>

const lijst = document.querySelector('#taken-lijst');

const nieuwItem = document.createElement('li');
nieuwItem.textContent = 'Boodschappen doen';

lijst.appendChild(nieuwItem);

// Resultaat:
// <ul id="taken-lijst">
//   <li>Boodschappen doen</li>
// </ul>

Meerdere elementen toevoegen

const lijst = document.querySelector('#taken-lijst');
const taken = ['Boodschappen', 'Sporten', 'Lezen'];

for (let taak of taken) {
  const item = document.createElement('li');
  item.textContent = taak;
  lijst.appendChild(item);
}

Geneste elementen

Je kunt elementen ook aan elkaar koppelen voordat je ze aan de pagina toevoegt.

const kaart = document.createElement('article');

const titel = document.createElement('h2');
titel.textContent = 'Mijn kaartje';

const tekst = document.createElement('p');
tekst.textContent = 'Dit is de inhoud van het kaartje.';

// Voeg de kinderen toe aan de kaart
kaart.appendChild(titel);
kaart.appendChild(tekst);

// Voeg de kaart toe aan de pagina
document.querySelector('#container').appendChild(kaart);

Elementen verwijderen

Er zijn twee manieren om een element te verwijderen uit de DOM.

element.remove() — eenvoudigst

const item = document.querySelector('#te-verwijderen');
item.remove();

removeChild() — via de parent

const lijst = document.querySelector('#taken-lijst');
const eersteItem = lijst.querySelector('li');

lijst.removeChild(eersteItem);

Verwijderen via een event listener

Vaak wil je een element verwijderen als er op een knop geklikt wordt. Je kunt this of event.target gebruiken om te weten welk element geklikt is.

const item = document.createElement('li');
item.textContent = 'Klikbaar item';

const verwijderKnop = document.createElement('button');
verwijderKnop.textContent = 'Verwijder';

// Bij klik: verwijder het hele li-element
verwijderKnop.addEventListener('click', () => {
  item.remove();
});

item.appendChild(verwijderKnop);
document.querySelector('#lijst').appendChild(item);

data-attributen en dataset

Met data-* attributen sla je extra informatie op in een HTML-element. Via JavaScript lees je die uit met dataset.

Data-attribuut instellen in HTML

<button data-id="42" data-actie="verwijder">Verwijder</button>
<li data-index="0">Eerste item</li>
<article data-categorie="tech">Artikel</article>

Data-attribuut uitlezen in JavaScript

const knop = document.querySelector('button');

console.log(knop.dataset.id);     // "42"
console.log(knop.dataset.actie);  // "verwijder"

Data-attribuut instellen via JavaScript

const item = document.createElement('li');
item.textContent = 'Nieuw item';
item.dataset.index = 3;

console.log(item.dataset.index); // "3"

Praktisch voorbeeld — verwijderen op basis van index

const items = ['Appel', 'Banaan', 'Druif'];
const lijst = document.querySelector('#fruit-lijst');

const toonItems = () => {
  lijst.innerHTML = '';

  items.forEach((item, index) => {
    const li = document.createElement('li');
    li.textContent = item;

    // Sla de index op als data-attribuut
    li.dataset.index = index;

    const knop = document.createElement('button');
    knop.textContent = 'Verwijder';
    knop.addEventListener('click', (e) => {
      // Lees de index uit het li-element
      const index = parseInt(li.dataset.index);
      items.splice(index, 1);
      toonItems(); // herrender
    });

    li.appendChild(knop);
    lijst.appendChild(li);
  });
};

toonItems();

querySelectorAll()

querySelectorAll() geeft alle overeenkomende elementen terug als een NodeList. Je kunt er doorheen loopen met for...of of forEach().

// Geeft alle <li> elementen terug
const alleItems = document.querySelectorAll('li');

// Door alle items loopen met for...of
for (let item of alleItems) {
  console.log(item.textContent);
}

// Of met forEach:
alleItems.forEach(item => {
  console.log(item.textContent);
});

Klasse toevoegen aan alle elementen

const alleKnoppen = document.querySelectorAll('button');

for (let knop of alleKnoppen) {
  knop.classList.add('actief');
}

Event listener op alle elementen

const alleItems = document.querySelectorAll('.lijst-item');

for (let item of alleItems) {
  item.addEventListener('click', () => {
    item.classList.toggle('geselecteerd');
  });
}

Compleet voorbeeld — takenlijst

Dit voorbeeld combineert createElement, appendChild en remove() in een werkende takenlijst.

HTML

<main>
  <section>
    <input type="text" id="taak-input" placeholder="Nieuwe taak...">
    <button id="voeg-toe">Toevoegen</button>
  </section>
  <ul id="taken-lijst"></ul>
</main>

JavaScript

const input = document.querySelector('#taak-input');
const knop = document.querySelector('#voeg-toe');
const lijst = document.querySelector('#taken-lijst');

knop.addEventListener('click', () => {
  const tekst = input.value.trim();

  // Doe niets als de invoer leeg is
  if (tekst === '') return;

  // Maak een nieuw li-element aan
  const item = document.createElement('li');
  item.textContent = tekst;

  // Maak een verwijderknop aan
  const verwijderKnop = document.createElement('button');
  verwijderKnop.textContent = 'Verwijder';
  verwijderKnop.addEventListener('click', () => {
    item.remove();
  });

  // Voeg de knop toe aan het li-element
  item.appendChild(verwijderKnop);

  // Voeg het li-element toe aan de lijst
  lijst.appendChild(item);

  // Maak de input leeg
  input.value = '';
});

Samenvatting