HTML/ Tekst inhoud van een HTML element

De inhoud

Als je een element hebt opgehaald met querySelector of querySelectorAll dan kan je de inhoud van zo een element bewerken. Een opgehaald element heeft twee attributen die de inhoud ophalen:

• .textContent
• .innerHTML

.textContent

Het attribuut .textContent haalt de tekst uit een HTML element op. Alle eventuele HTML-elementen worden hierbij weggehaald, het is echt pure tekst. Bekijk de volgende HTML en JavaScript code eens.

<button class="my-class">Dit is een button</button>

const myBtn = document.querySelector('.my-class');
console.log(myBtn.textContent);

Tekst veranderen

Je kan tekst ook aanpassen, dat doe je door de .textContent attribute te gebruiken maar na de .textContent een = teken te zetten en dan een string met nieuwe tekst te plaatsen.

const myBtn = document.querySelector('.my-class');
myBtn.textContent = 'Dit is de nieuwe tekst';

Tekst toevoegen

Je kan tekst ook toevoegen, dit doe je door eerst de tekst op te halen en daarna met bovenstaande code weer terug te zetten.

const myBtn = document.querySelector('.my-class');
const currentText = myBtn.textContent;
myBtn.textContent = currentText + ' en dit komt er bij';

.innerHTML

Het .innerHTML attribuut werkt hetzelfde als .textContent met een groot verschil, bij .innerHTML haal en pas je de HTML code op die in een element zit.
In bovenstaand voorbeeld zit in de button verder geen HTML elementen, dus de .innerHTML zal bij het ophalen ook dezelfde tekst terug geven. Maar bekijk onderstaande HTML code eens.

<div class="my-div">
  Dit is wat tekst in een DIV en onderaan staat een button.
  <br>
  <button class="my-class">Dit is een button</button>
</div>

const myDiv = document.querySelector('.my-div');
console.log(myDiv.innerHTML);

Dit is wat tekst in een DIV en onderaan staat een button.
<br>
<button class="my-class">Dit is een button</button>

const myDiv = document.querySelector('.my-div');
myDiv.innerHTML += '<div>Deze div wordt toegevoegd!</div>';