Javascript textContent: Inhalt lesen und ändern
textContent agiert ähnlich wie innerHTML: textContent gibt den Inhalt eines Elements zurück oder setzt den Inhalt eines Elements. textContent wird aber nicht als HTML geparst, das Element wird schneller aufgebaut sind. Auch innerText liest oder schreibt den Inhalt eines Elements, aber gibt nur den menschenlesbaren Text zurück.
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 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
.
<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>
<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.
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.
