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

d = document.getElementById("d");
dump(d.innerHTML);

// the string "<p>Content</p><p>Further Elaborated</p>"
// is dumped to the console window

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 Elementtypen wie <body> oder <html> verändern oder auslesen und sie kann benutzt werden, um sich den Quellcode einer dynamisch veränderten Seite anzuschauen:

// Copy and paste into address bar as a single line
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";
// assuming el is an HTML DOM element
el.innerHTML = name; // harmless in this case

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

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; // shows the 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

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

See also

  • innerDOM - For those wishing to adhere to standards, here is one set of JavaScript functions offering to serialize or parse XML so as to set element contents defined as string(s) via the DOM or getting element contents obtained from the DOM as a string.
  • insertAdjacentHTML - An alternative for innerHTML, allowing you to append the new HTML, instead of replacing it.
  • jssaxparser - A more robust (though heavier) solution than innerDOM (supports parsing with namespaces, single-quoted attributes, CDATA sections, etc.) is this SAX2 parser when used with its DOM content handler. (Offers String to DOM; DOM to String is significantly easier)
  • Efficiency considerations: On quirksmode
  • MSDN: innerHTML Property

Schlagwörter des Dokuments und Mitwirkende

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