JavaScript Leerlijn

23-02-2026Ongeveer 2 minutenOngeveer 297 woorden

Begrip: Inhoud van een HTMLElement aanpassen

De inhoud van een element kan via drie properties uitgelezen of aangepast worden:

innerHTML: Geeft de HTML-code terug die als kind meegegeven is aan het element.

Waarschuwing

Gebruik deze property nooit om willekeurige HTML-code toe te voegen aan een website, hier zouden script tags of andere dingen in kunnen zitten die gebruikt kunnen worden voor een Cross-site scripting (XSS) aanval.

<html lang="en">
<body>
  <div id="inhtml">
      <span>Hello <span style="display: none;">World</span></span>
  </div>

  <script>
      const inHtml = document.getElementById('inhtml')

      // Print <span>Hello <span style="display: none;">World</span></span>
      console.log(inHtml.innerHTML)
      
      // Past de inhoud aan naar een titel met de H1 styling.
      inHtml.innerHTML = '<h1>Inner HTML</h1>'
  </script>
</body>
</html>

innerText: Geeft de gerenderde text terug. Inhoud die via CSS of accessibility attributes verborgen is, wordt hier niet weergegeven.

<html lang="en">
<body>
  <div id="inTxt">
      <span>Hello <span style="display: none;">World</span></span>
  </div>

  <script>
      const inTxt = document.getElementById('inTxt')

      // Print Hello
      console.log(inTxt.innerHTML)
      
      // Past de inhoud aan naar de string <h1>Inner HTML</h1>, tags worden genegeerd.
      inTxt.innerText = '<h1>Inner HTML</h1>'
  </script>
</body>
</html>

textContent: Geeft alle textinhoud van een element, inclusief spaties en newlines. Ook dingen die door CSS of accessibility attributes verborgen zijn, worden weergegeven.

<html lang="en">
<body>
  <div id="txtContent">
      <span>Hello <span style="display: none;">World</span></span>
  </div>

  <script>
      const txtContent = document.getElementById('txtContent')

      // Print "\n    Hello World\n"
      console.log(txtContent.textContent)
      
      // Past de inhoud aan naar de string <h1>Inner HTML</h1>, tags worden genegeerd.
      txtContent.innerText = '<h1>Inner HTML</h1>'
  </script>
</body>
</html>