textContent: Text-Inhalt lesen und ändern

textContent

textContent gibt ein literales Abbild des Inhalts mitsamt Whitespace – Leerzeichen und Zeilenumbrüchen – zurück.

const content = document.querySelector(elem).textContent;

Agiert textContent als Setter, ersetzt elem.textContent den vollständigen Inhalt von elem durch Text – soweit funktioniert textContent genauso wie innerHTML.

document.querySelector(elem).textContent = 'Neuer Inhalt';

textContent vs innerHTML: Sicherheit gegen XSS

Während der Wert von innerHTML als HTML geparst wird, interpretiert Javascript textContent als Text. Der wichtigste Punkt, der für den Einsatz von textContent gegenüber innerHTML spricht, ist die Sicherheit vor XSS.

element.innerHTML = userInput;

Wenn userInput Scriptcode enthält, wird das Skript ausgeführt.

<script>alert(1)</script>

Mit textContent hingegen wird userInput als Text angezeigt, aber nicht als Code ausgeführt.

element.textContent = userInput;

Praktisch: textContent als Zeichenzähler

Wenn ein Eingabefeld – z.B. in einem Support-Formular – begrenzt ist oder das Datenbankfeld limitiert ist, ist ein Zeichenzähler für ein textarea-Element eine praktische Hilfe für den Benutzer. Ohne Zähler führt das Abschneiden des Texts zu Frust.

const textarea = document.getElementById("message");
const counter  = document.getElementById("counter");
const max      = textarea.maxLength;

function updateCounter() {
  counter.textContent = 
    `${textarea.value.length} / ${max} Zeichen`;
}

textarea.addEventListener("input", updateCounter);
updateCounter(); // Initialwert setzen

innerText

Bei Abfragen gibt innerText den Inhalt eines Elements und all seiner Abkömmlinge ebenfalls als reinen Text zurück. Enthält der Text HTML-Tags, werden sie maskiert. Ist der Text durch CSS ausgeblendet (visibility: hidden oder display: none), wird er nicht ausgegeben.

Wird innerText einem Element zugewiesen, werden alle Inhalte des Elements durch ein einziges Text-Element ersetzt.

Header

innerHTML, textContent & innerText

Wird nicht angezeigt oder ist ausgeblendet.

<div id="demo">
   <h4>Header</h4>
   <img src="svg/textcontent.png" width="980" height="588" alt="Javascript text-content">
   <script>const dummy = document.querySelector("time").innerHTML;</script>
   <p>innerHTML, textContent & innerText</p>
   <p>
      <span style="visiblity:hidden">Wird nicht angezeigt</span> 
      <span style="display: none">oder ist ausgeblendet</span>.
   </p>
</div>

…

console.log (document.querySelector("#demo").innerText);
console.log (document.querySelector("#demo").textContent);

innerText gibt genauso wie textContent den Text wörtlich zurück, beide Eigenschaften maskieren Sonderzeichen, aber innerText gibt keinen Inhalt aus <script> und <style> zurück, sondern nur den menschenlesbaren Teil.

Header


innerHTML, textContent & innerText

Header
		
		const dummy = document.querySelector("time").innerHTML;
		innerHTML, textContent & innerText

textContent und innerText kamen lange nach dem geliebten innerHTML und sind trotz guter Unterstützung durch alle modernen Browser die kleinen Mauerblümchen unter den Eigenschaften der DOM-Elemente. Dabei sind sie deutlich schneller als innerHTML, denn die eingefügten Zeichenketten werden nicht geparst.