Changing Text and HTML

Text oder HTML kann in jedem selektierten Element verändert werden. Dazu verwenden wir zwei Methoden:

• innerHTML
• textContent

textContent ist schneller als innerHTML, wenn nur Text verändert werden soll, ist textContent zu bevorzugen!

<div class="div">
  <p class="paragraph">Ich bin ein Absatz.</p>
</div>

textContent

Mit textContent können wir den Text innerhalb eines Elements verändern. Das DOM aktualisiert sich automatisch. Die Änderungen beziehen sich rein auf den Text.

const paragraph = document.querySelector('.paragraph');
paragraph.textContent = "Huhu! Ich grätsche rein!";

<div class="div">
  <p class="paragraph">Ich bin ein Absatz.</p>
  <p class="paragraph">Huhu! Ich grätsche rein!</p>
</div>

innerHTML

Mit innerHTML können wir – wie der Name schon sagt – HTML innerhalb eines Elements ändern. Wenn ganze HTML-Blöcke eingefügt werden sollen, schreiben wir den Code in Template Literals, damit die Zeilenumbrüche erhalten bleiben.

const div = document.querySelector('.div');
div.innerHTML =
  `<p>Ich grätsche da jetzt <span class="red">voll</span> rein.</p>
  <ul>
    <li>erstens</li>
    <li>zweitens</li>
    <li>drittens</li>
  </ul>`;

<div class="div">
  <p class="paragraph">Ich bin ein Absatz.</p>
  <p class="paragraph">Ich grätsche da jetzt <span class="red">voll</span> rein!</p>
  <ul>
    <li>erstens</li>
    <li>zweitens</li>
    <li>drittens</li>
  </ul>
</div>