Javascript textContent: Inhalt lesen und ändern

Javascript textContent HTML Markup als Text lesen und überschreiben

textContent agiert ähnlich wie innerHTML (IE ab IE9): textContent gibt den Inhalt eines Elements zurück oder setzt den Inhalt eines Elements. textContent wird aber nicht als HTML geparst, so dass die Seite oder das Element schneller aufgebaut sind.

Die modernen Browser unterstützen zusätzlich outerHTML und insertAdjacent.

textContent

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

var 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

Während der Wert von innerHTML als HTML geparst wird, interpretiert Javascript textContent als Text.

document.getElementById('c1').innerHTML = 
   '<p>Mit innerHTML</p><img src="trout-fishing.svg">';
document.getElementById('c2').textContent = 
   '<p>Mit textContent</p><img src="trout-fishing.svg">';

innerHTML zeigt das Bild mit allen eventuellen CSS-Eigenschaften an, textContent die Zeichenkette <img src="img.jpg">

textContent wird von allen modernen Browsern einschl. IE9 unterstützt.

innerText

Bei Abfragen gibt innerText den Inhalt eines Elements und all seiner Abkömmlinge als reinen Text zurück. Enthält der Text HTML-Tags, werden sie maskiert.

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

Header

Javascript text-content

innerHTML, textContent & innerText

<div id="demo">
   <h4>Header</h4>
   <img src="svg/DOM-W3C.png" width="980" height="588" alt="Javascript text-content">
   <script>let a = document.querySelector("time").innerHTML;</script>
   <p>innerHTML, textContent & innerText</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.

innerText
Header


innerHTML, textContent & innerText
textContent
Header
		
		let a = 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 deutlich schneller als innerHTML, denn die eigefügten Zeichenketten werden nicht geparst.