Javascript textContent: Inhalt lesen und ändern

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 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.

outer HTML