MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.innerHTML

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Die Eigenschaft Element.innerHTML setzt oder liefert die Unterelemente eines Elements in HTML Syntax .

Bemerkung: Hat ein <div>, <span>, oder <noembed> Knoten ein Text-Kindknoten, der die Zeichen (&), (<), oder (>) enthält, so ersetzt innerHTML diese Zeichen durch &amp, &lt und &gt. Möchte man eine korrekte Kopie des Textknotens erhalten, muss man stattdessen Node.textContent benutzen.

Syntax

var content = element.innerHTML;

Weist der Variable content den HTML-code zu, der alle Unterelemente von element's beschreibt.

 element.innerHTML = content;

Entfernt alle Kinderknoten von element , parst content und fügt den resultierenden Knoten als Kind dem element- Knoten hinzu.

Beispiel

<html>
<head></head>
<body>

<div id="txt">
  <script     id="txt0"> x=0> </script>
    <noembed    id="txt1"> 1   </noembed>  // "noembed"  => veraltet, kein Standard mehr!
    <noframes   id="txt2"> 2   </noframes>
    <noscript   id="txt3"> 3   </noscript>
    <div        id="txt4"> 4   </div>
    <div>
      <noscript id="txt5"> 5   </noscript>
    </div>
    <span       id="txt6"> 6   </span>
  </div>

  <div id="innerHTMLtxt"></div>
<div id="textContenttxt"><div>

<script> 
for (i=0;i<7;i++){ 
    x="txt"+i; 
    document.getElementById(x).firstChild.nodeValue='&<>'
}

document.getElementById("innerHTMLtxt").textContent=document.getElementById("txt").innerHTML
document.getElementById("textContenttxt").textContent=document.getElementById("txt").textContent
</script>

<body>
</html>
// HTML:
// <div id="d"><p>Content</p>
// <p>Further Elaborated</p>
// </div>

let d = document.getElementById("d");
console.log(d.innerHTML);

// der String => "<p>Content</p><p>Further Elaborated</p>"
// wird in der Console ausgegeben

Bemerkungen

Mit dieser Eigenschaft ist es möglich, auf einfachem Weg, den kompletten Inhalt eines Elements zu ersetzen. So kann man zum Beispiel den kompletten Inhalt des <body> -Tags einer Seite wie folgt löschen:

document.body.innerHTML = "";  // Replaces body content with an empty string.

Die innerHTML Eigenschaft lasst sich von vielen Element-Typen wie <body> oder <html> verändern oder auslesen und sie kann benutzt werden, um sich den Quellcode einer dynamisch veränderten Seite anzuschauen:

// Schreibe dieses Code in als ganzes und in einer Zeile in die Konsole
javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";

Diese Eigenschaft wurde als erstes in Webbrowsern umgesetzt, bevor sie von WHATWG und W3C für HTML5 spezifiziert wurde. Ältere Implementationen dieser Eigenschaften können von einander abweichen. So ändert zum Beispiel der Internet Explorer das value-Attribute von  innerHTML, wenn text in ein Textfeld eingegeben wird, während es bei Gecko-Browsern gleich bleibt.

Sicherheitsüberlegung

Es ist nicht ungewöhnlich mit Hilfe von innerHTML Text in eine Webseite einzufügen. Dies ist jedoch nicht ganz ungefährlich:

var name = "John";
// Wir gehen davon aus, dass "el" ein HTML DOM Element ist.
el.innerHTML = name; // Harmlos in diesem Fall.
// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // Harmlos in diesem Fall.

Obwohl dies wie eine cross-site scripting Attacke aussieht, ist das Resultat jedoch harmlos. HTML5 legt fest, dass ein <script> tag, das durch innerHTML eingefügt worden ist, nicht ausgeführt werden soll.

Jedoch gibt es die Möglichkeit auch ohne <script>-Elemente JavaScript Code auszuführen. Somit besteht ein Sicherheitsrisiko, wenn man innerHTML verwendet, um Strings einzubetten, über die man keine Kontrolle hat, wie im folgendem Beispiel zu sehen ist:

var name = "<img src=x onerror=alert(1)>";
el.innerHTML = name; // Zeigt den alert.

Aus diesem Grund, sollte man innerHTML nicht benutzen, wenn man nur Text einzufügen möchte; sondern für diesen Fall ehernode.textContent verwenden. Damit wird der eingefügte Text nicht als HTML Inhalt soldern als reiner Text interpretiert.

Spezifikation

Spezifikationen Status Kommentar
DOM Parsing and Serialization
Die Definition von 'Element.innerHTML' in dieser Spezifikation.
Arbeitsentwurf  

Siehe auch

  • innerDOM - Für diejenigen, die sich an Standards halten wollen, ist hier ein Satz von JavaScript-Funktionen, die das Einbeziehen von XML vorsehen, um Elementinhalte, die als String (s) definiert sind, über das DOM zu setzen oder Elementinhalte, die aus dem DOM als String erhalten werden, zu erhalten.
  • insertAdjacentHTML - Eine Alternative für innerHTML, welches dir das anhängen von neuem HTML erlaubt, anstelle es zu ersetzen.
  • jssaxparser - Eine robustere aber auch "lastigerer" Lösung anstelle von innerDOM (unterstützt das Parsen mit namespaces, single-quoted attributes, CDATA sections, etc.) ist das der SAX2-Parser, wenn es sein DOM content handler nutzt. (Übergibt einen String zum DOMDOM zu String ist deutlich einfacher).
  • Effizienzsteigerung im quirksmode
  • MSDN: innerHTML Property

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: StevenS77, sfraenkel
 Zuletzt aktualisiert von: StevenS77,