JavaScript innerHTML, innerText und textContent

In Javascript gibt es drei Eigenschaften, die verwendet werden können, um den Inhalt eines HTML-Elements im DOM festzulegen oder zurückzugeben:innerHTML, innerText und textContent. Wenn Sie sich über die Unterschiede nicht sicher sind und sich fragen, welche Sie verwenden sollen, hilft Ihnen der folgende Vergleich hoffentlich weiter.

(1) Das innerHTML -Eigenschaft legt den Inhalt eines Elements mit neuem HTML-Inhalt fest und gibt ihn zurück.

// Setting text with innerHTML:
const example = document.getElementById('example')
example.innerHTML = "<p>This is <strong>my</strong> paragraph.</p>"

Obwohl HTML5 einen <script> verhindert -Tag, das mit innerHTML eingefügt wurde, nicht ausgeführt wird, besteht immer noch ein Sicherheitsrisiko, wenn Sie innerHTML verwenden, um Zeichenfolgen mit Javascript festzulegen. Cyberkriminelle können Javascript-Code einbetten, ohne <script> zu verwenden Inhalte in der HTML-Seite umzuschreiben oder den Browser auf eine andere Seite mit bösartigem Code umzuleiten. Aus diesem Grund wird NICHT empfohlen, innerHTML beim Einfügen von reinem Text zu verwenden.

Um mehr über innerHTML- und Cross-Site Scripting (XSS)-Angriffe zu erfahren, lesen Sie die Ressourcen-Links am Ende dieses Beitrags.

// HTML5 prevents malicious <script> from executing:
// alert WILL NOT show
const example1 = "<script>alert('I am an annoying alert!')</script>"
el.innerHTML = example1 

const example2 = document.getElementById('example2')
example2.innerHTML = '<script deferred>alert("XSS Attack");</script>'


// Examples of cybercriminals embedding Javascript without <script>:
// alert WILL show
const example3 = "<img src='x' onerror='alert(1)'>"
el.innerHTML = example3 

const example4 = document.getElementById('example4')
example4.innerHTML = '<img src=x onerror="alert(\'XSS Attack\')">'

<img src=j&#X41vascript:alert('test2')>

<img src="http://url.to.file.which/not.exist" onerror=alert(document.cookie);>

<button onmouseover=alert('Wufff!')>click me!</button>



(2) Der innerText Die Eigenschaft gibt den Inhalt aller Elemente zurück, mit Ausnahme von <script> und <style> Elemente. Der zurückgegebene Inhalt ist sichtbarer Klartext ohne Formatierung, ähnlich wie Text hervorzuheben und dann zu kopieren und einzufügen. Was du siehst ist was du kriegst.

Ein Nachteil bei der Verwendung von innerText ist, dass sein Wert einen Reflow auslöst, da er CSS-Stylings kennt, was zu einer verringerten Leistung führt. Reflow ist, wenn der Browser Seitenelemente neu berechnet, um das Dokument neu zu rendern. Zu den Instanzen, die einen Reflow auslösen, gehören die Größenänderung des Browserfensters oder das Ändern von Elementen im DOM. Reflow ist rechenintensiv und sollte minimiert werden, um Geschwindigkeit, Effizienz und Benutzererfahrung zu verbessern.

HINWEIS:Die innerText-Eigenschaft wird in Internet Explorer 9 und früher nicht unterstützt.

// Setting text with innerText:
const example = document.getElementById('example')
example.innerText = "text"



(3) Der textContent -Eigenschaft gibt den Rohinhalt mit Stil innerhalb aller Elemente zurück, schließt jedoch die HTML-Element-Tags aus. Dazu gehört <script> und <style> Elemente, Leerzeichen, Zeilenumbrüche und Wagenrückläufe. Im Gegensatz zu innerHTML weist textContent eine bessere Leistung auf, da sein Wert nicht als HTML geparst wird. Aus diesem Grund kann die Verwendung von textContent auch Cross-Site-Scripting (XSS)-Angriffen vorbeugen. Im Gegensatz zu innerText kennt textContent kein CSS-Styling und löst keinen Reflow aus. Alle Node-Objekte haben textContent, wohingegen nur HTMLElement-Objekte innerText haben.

HINWEIS:Die textContent-Eigenschaft wird in Internet Explorer 8 und früheren Versionen nicht unterstützt.

// Setting text with textContent:
const example = document.getElementById('example')
example.textContent = "word"



Das folgende Beispiel zeigt, wie jede der drei Eigenschaften den Inhalt von <p> zurückgibt Element:

<p id="demo"> This element has extra spacing   and contains <span>a span element</span>.
</p>
function getInnerHtml() {
  console.log(document.getElementById("demo").innerHTML)
}

innerHTML returns: 
" This element has extra spacing   and contains <span>a span element</span>."
/* 
The innerHTML property returns the text, spacing, and inner HTML element tags.
*/



function getInnerText() {
  console.log(document.getElementById("demo").innerText)
}

innerText returns: 
"This element has extra spacing and contains a span element."
/* 
The innerText property returns just the visible text, 
without spacing or inner HTML element tags.
*/



function getTextContent() {
  console.log(document.getElementById("demo").textContent)
}

textContent returns: 
" This element has extra spacing   and contains a span element."
/* 
The textContent property returns the text and spacing, 
but without the inner HTML element tags.
*/

Nachdem Sie nun die Unterschiede zwischen allen verfügbaren Optionen zum Zurückgeben und Festlegen von Text in Javascript kennen, verwenden Sie diejenige, die Ihren Inhaltsanforderungen am besten entspricht.

Ressourcen:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText
http://perfectionkills.com/the-poor-misunderstood-innerText/
https://kellegous.com/j/2013/02/27/innertext-vs-textcontent/
https://developers.google.com/speed/docs/insights/browser-reflow
https://frontendmasters.com/courses/web-performance/layouts-and-reflows/
https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting
https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)