JavaScript Academy · Les

Tekst- en HTML-inhoud wijzigen

Werk inhoud bij met textContent en innerHTML.

Les 1 van 413 stappen

Tekst- en HTML-inhoud wijzigen is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Tekst lezen en schrijven

Als je wilt wijzigen wat een element weergeeft, kun je de tekst of de HTML instellen. De juiste keuze hangt ervan af of je opmaak nodig hebt en hoeveel vertrouwen je in de gegevens hebt.

textContent

textContent haalt de onbewerkte tekst van een element op of stelt die in. Als je deze eigenschap instelt, vervangt ze alle kindelementen door één tekstnode en behandelt ze de invoer als platte tekst.

const el = document.querySelector("#status");
el.textContent = "Saved!";

textContent beschermt opmaaktekens

Omdat het platte tekst is, wordt HTML in de tekenreeks letterlijk weergegeven en niet verwerkt. Daardoor is dit veilig tegen injectie.

el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>

innerHTML

innerHTML haalt de HTML-opmaak binnen een element op of stelt die in. Als je deze eigenschap instelt, wordt de tekenreeks als HTML geparseerd en worden echte nodes opgebouwd.

const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";

innerHTML vervangt alles

Als je een waarde toewijst aan innerHTML, worden bestaande kindelementen verwijderd en wordt de substructuur opnieuw opgebouwd uit de nieuwe opmaak.

box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";

Het gevaar van XSS

Voeg nooit niet-vertrouwde gebruikersinvoer toe aan innerHTML. Een schadelijke tekenreeks kan scripts of gebeurtenisafhandelaars injecteren. Deze kwetsbaarheid heet XSS.

const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;

innerText

innerText lijkt op textContent, maar houdt rekening met opmaak: het weerspiegelt weergegeven tekst en negeert verborgen elementen.

console.log(el.innerText); // visible text only

textContent versus innerText

textContent retourneert alle tekst, inclusief verborgen inhoud, en is sneller omdat het geen opmaakberekening activeert. innerText houdt rekening met de opmaak en is trager.

el.textContent; // all text, even display:none
el.innerText;   // only what is visually rendered

Tekst veilig toevoegen

Als je tekst wilt toevoegen zonder bestaande nodes te verwijderen, maak je een tekstnode of gebruik je insertAdjacentText in plaats van textContent te overschrijven.

el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");

HTML invoegen zonder opnieuw te parseren

insertAdjacentHTML voegt opmaak toe op een bepaalde positie zonder het hele element opnieuw te parseren. Dat is efficiënter dan innerHTML opnieuw opbouwen.

box.insertAdjacentHTML("beforeend", "<li>New item</li>");

De juiste eigenschap kiezen

Gebruik textContent voor platte tekst (de veilige standaardkeuze), innerHTML alleen met vertrouwde opmaak en innerText wanneer je specifiek weergegeven, zichtbare tekst nodig hebt.

Korte controle

Kies de veilige aanpak.

Beantwoord dit in de interactieve les

Samenvatting

textContent stelt platte, beschermde tekst in en is de veilige standaardkeuze. innerHTML verwerkt opmaak, maar brengt bij niet-vertrouwde invoer het risico op XSS met zich mee. innerText weerspiegelt alleen zichtbare, weergegeven tekst. Geef voor het toevoegen van inhoud de voorkeur aan insertAdjacentHTML/insertAdjacentText boven het overschrijven van het hele element.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Tekst- en HTML-inhoud wijzigen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Tekst- en HTML-inhoud wijzigen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Tekst- en HTML-inhoud wijzigen”?

Werk inhoud bij met textContent en innerHTML. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Tekst- en HTML-inhoud wijzigen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy