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
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
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, sondern nur den menschenlesbaren Teil.
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.
