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 .
<div>, <span>, oder <noembed> Knoten ein Text-Kindknoten, der die Zeichen (&), (<), oder (>) enthält, so ersetzt innerHTML diese Zeichen durch &, < und >. 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,"<") + "</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