diff options
Diffstat (limited to 'files/de/web/api/element/innerhtml/index.html')
| -rw-r--r-- | files/de/web/api/element/innerhtml/index.html | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/files/de/web/api/element/innerhtml/index.html b/files/de/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..a5d3d3011d --- /dev/null +++ b/files/de/web/api/element/innerhtml/index.html @@ -0,0 +1,204 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +translation_of: Web/API/Element/innerHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">Die {{domxref("Element")}} Eigenschaft <strong><code>innerHTML</code></strong> ruft das im Element enthaltene HTML-oder XML-Markup ab oder legt dieses fest.</span></p> + +<div class="note"><strong>Hinweis: </strong>Wenn ein {{HTMLElement("div")}}, {{HTMLElement("span")}} oder {{HTMLElement("noembed")}}-Knoten einen untergeordneten Textknoten mit den Zeichen <code>&</code>, <code><</code> oder <code>></code> enthält, gibt <code>innerHTML</code> diese Zeichen als ihre entsprechende HTML-Entitäten <code>"&amp;"</code>, <code>"&lt;"</code> bzw. <code>"&gt;"</code> zurück. Verwenden Sie {{domxref("Node.textContent")}}, um eine reine Kopie des Inhalts dieser Textknoten zu erhalten.</div> + +<p>Verwenden Sie die Methode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}, um den HTML-Code in das Dokument einzufügen, anstatt den Inhalt eines Elements zu ersetzen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML; + +<var>element</var>.innerHTML = <var>htmlString</var>; +</pre> + +<h3 id="Wert">Wert</h3> + +<p>Ein {{domxref("DOMString")}}, das die HTML-Serialisierung der Nachkommen des Elements enthält. Wenn Sie den Wert von <code>innerHTML</code> festlegen, werden alle Nachkommen des Elements entfernt und durch Knoten ersetzt, die durch Analysieren des in <em>htmlString</em> angegebenen HTML-Codes erstellt werden.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>Es wurde versucht, den Wert von <code>innerHTML</code> mit einem nicht ordnungsgemäß formatierten HTML-String festzulegen.</dd> + <dt><code>NoModificationAllowedError</code></dt> + <dd>Es wurde versucht, den HTML-Code in einen Knoten einzufügen, dessen übergeordnetes Element {{domxref("Document")}} ist.</dd> +</dl> + +<h2 id="Nutzungshinweise">Nutzungshinweise</h2> + +<p>Die <code>innerHTML</code>-Eigenschaft kann verwendet werden, um den aktuellen HTML-Quellcode der Seite einschließlich aller Änderungen zu überprüfen, die seit dem erstmaligen Laden der Seite vorgenommen wurden.</p> + +<h3 id="HTML-Inhalte_eines_Elements_auslesen">HTML-Inhalte eines Elements auslesen</h3> + +<p>Das Lesen von <code>innerHTML</code> bewirkt, dass der Benutzer-Agent das HTML- oder XML-Fragment serialisiert, das aus den Nachkommen des Elements besteht. Der resultierende String wird zurückgegeben.</p> + +<pre class="brush: js">let contents = myElement.innerHTML;</pre> + +<p>Auf diese Weise können Sie das HTML-Markup der Inhaltsknoten des Elements anzeigen.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Das zurückgegebene HTML- oder XML-Fragment wird basierend auf dem aktuellen Inhalt des Elements generiert, sodass das Markup und Formatierung des zurückgegebenen Fragments wahrscheinlich nicht mit dem ursprünglichen Seiten-Markup übereinstimmt.</p> +</div> + +<h3 id="Inhalte_eines_Element_ersetzen">Inhalte eines Element ersetzen</h3> + +<p>Durch das Festlegen des Wertes von <code>innerHTML</code> können Sie den vorhandenen Inhalt eines Elements problemlos durch neuen Inhalt ersetzen.</p> + +<p>Beispielsweise können Sie den gesamten Inhalt eines Dokuments löschen, indem Sie den Inhalt des Attributs {{domxref("Document.body", "body")}} löschen:</p> + +<pre class="brush: js">document.body.innerHTML = "";</pre> + +<p>In diesem Beispiel wird das aktuelle HTML-Markup des Dokuments abgerufen und die Zeichen <code>"<"</code> durch die HTML-Entität <code>"&lt;"</code> ersetzt, wodurch der HTML-Code im Wesentlichen in unformatierten Text umgewandelt wird. Dieses wird dann in ein Element {{HTMLElement("pre")}} eingeschlossen. Dann wird der Wert von <code>innerHTML</code> in diesen neuen String geändert. Als Ergebnis wird der Dokumentinhalt durch eine Anzeige des gesamten Quellcodes der Seite ersetzt.</p> + +<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"&lt;") + + "</pre>";</pre> + +<h4 id="Unter_der_Haube">Unter der Haube</h4> + +<p>Was passiert genau, wenn Sie den Wert von <code>innerHTML</code> festlegen? Der Benutzer-Agent führt dabei die folgenden Schritte aus:</p> + +<ol> + <li>Der angegebene Wert wird als HTML oder XML analysiert (basierend auf dem Dokumenttyp), sodass ein {{domxref("DocumentFragment")}}-Objekt den neuen Satz von DOM-Knoten für die neuen Elemente darstellt.</li> + <li>Wenn das Element, dessen Inhalt ersetzt wird, ein {{HTMLElement("template")}}-Element ist, wird das Attribut {{domxref("HTMLTemplateElement.content", "content")}} des Elements <code><template></code> durch das neue <code>DocumentFragment</code> ersetzt, welches in Schritt 1 erstellt wurde.</li> + <li>Bei allen anderen Elementen wird der Inhalt des Elements durch die Knoten im neuen <code>DocumentFragment</code> ersetzt.</li> +</ol> + +<h3 id="Sicherheitsüberlegungen">Sicherheitsüberlegungen</h3> + +<p>Es ist nicht ungewöhnlich, dass <code>innerHTML</code> zum Einfügen von Text in eine Webseite verwendet wird. Es besteht jedoch die Möglichkeit, dass dies zu einem Angriffsvektor auf einer Website wird, wodurch ein potenzielles Sicherheitsrisiko entsteht.</p> + +<pre class="brush: js">const name = "John"; +// angenommen 'el' ist ein HTML DOM Element +el.innerHTML = name; // in diesem Fall harmlos + +// ... + +name = "<script>alert('Ich bin John in einem störenden Alert!')</script>"; +el.innerHTML = name; // in diesem Fall harmlos</pre> + +<p>Obwohl dies wie ein {{interwiki("wikipedia", "cross-site scripting")}}-Angriff aussieht, ist das Ergebnis harmlos. HTML5 schreibt vor, dass ein mit <code>innerHTML</code> eingefügtes {{HTMLElement("script")}}-Tag <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">nicht ausgeführt werden soll</a>.</p> + +<p>Es gibt jedoch Möglichkeiten, JavaScript auszuführen, ohne {{HTMLElement("script")}}-Elemente zu verwenden. Daher besteht immer ein Sicherheitsrisiko, wenn Sie <code>innerHTML</code> verwenden, um Strings festzulegen, über die Sie keine Kontrolle haben. Zum Beispiel:</p> + +<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // zeigt den alert</pre> + +<p>Aus diesem Grund wird empfohlen, <code>innerHTML</code> nicht zum Einfügen von reinem Text zu verwenden. Verwenden Sie stattdessen {{domxref("Node.textContent", "textContent")}}. Der übergebene Inhalt wird nicht als HTML-Code analysiert, sondern als reiner Text eingefügt.</p> + +<div class="blockIndicator warning"> +<p><strong>Warnung:</strong> Wenn Ihr Projekt einer Sicherheitsüberprüfung unterzogen wird, führt die Verwendung von <code>innerHTML</code> höchstwahrscheinlich dazu, dass Ihr Code abgelehnt wird. <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">Wenn Sie beispielsweise <code>innerHTML</code></a> in einer <a href="/de/docs/Mozilla/Add-ons/WebExtensions">Browsererweiterung</a> verwenden und die Erweiterung bei <a href="https://addons.mozilla.org/">addons.mozilla.org</a> einreichen, wird sie den automatisierten Überprüfungsprozess nicht bestehen.</p> +</div> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In diesem Beispiel wird mit <code>innerHTML</code> ein Mechanismus zum Protokollieren von Nachrichten in einem Feld auf einer Webseite erstellt.</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function log(msg) { + var logElem = document.querySelector(".log"); + + var time = new Date(); + var timeStr = time.toLocaleTimeString(); + logElem.innerHTML += timeStr + ": " + msg + "<br/>"; +} + +log("Logging mouse events inside this container..."); +</pre> + +<p>Die Funktion <code>log()</code> erstellt die Protokollausgabe, indem sie mithilfe von {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} die aktuelle Uhrzeit aus einem {{jsxref("Date")}}-Objekt abruft und einen String aus dem Zeitstempel und dem Nachrichtentext erstellt. Dann wird die Nachricht an die Box mit der Klasse <code>"log"</code> angehängt.</p> + +<p>Wir fügen eine zweite Methode hinzu, die Informationen zu auf {{domxref("MouseEvent")}} basierenden Ereignissen protokolliert (z. B. {{event("mousedown")}}, {{event("click")}} und {{event("mouseenter")}}):</p> + +<pre class="brush: js">function logEvent(event) { + var msg = "Event <strong>" + event.type + "</strong> at <em>" + + event.clientX + ", " + event.clientY + "</em>"; + log(msg); +}</pre> + +<p>Dann verwenden wir dies als Ereignishandler für eine Reihe von Mausereignissen in der Box, die unser Protokoll enthält:</p> + +<pre class="brush: js">var boxElem = document.querySelector(".box"); + +boxElem.addEventListener("mousedown", logEvent); +boxElem.addEventListener("mouseup", logEvent); +boxElem.addEventListener("click", logEvent); +boxElem.addEventListener("mouseenter", logEvent); +boxElem.addEventListener("mouseleave", logEvent);</pre> + +<h3 id="HTML">HTML</h3> + +<p>Das HTML für unser Beispiel ist denkbar einfach.</p> + +<pre class="brush: html"><div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div></pre> + +<p>Das {{HTMLElement("div")}} mit der Klasse <code>"box"</code> ist nur ein Container für Layoutzwecke, der den Inhalt mit einem Rahmen darstellt. Der <code><div></code>, dessen Klasse <code>"log"</code> ist, ist der Container für den Protokolltext.</p> + +<h3 id="CSS">CSS</h3> + +<p>Das folgende CSS formatiert unseren Beispielinhalt.</p> + +<pre class="brush: css">.box { + width: 600px; + height: 300px; + border: 1px solid black; + padding: 2px 4px; + overflow-y: scroll; + overflow-x: auto; +} + +.log { + margin-top: 8px; + font-family: monospace; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>Der resultierende Inhalt sieht so aus. Sie können die Ausgabe im Protokoll anzeigen, indem Sie die Maus in das Feld hinein- und herausbewegen, darauf klicken und so weiter.</p> + +<p>{{EmbedLiveSample("Example", 640, 350)}}</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("api.Element.innerHTML")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Node.textContent")}} und {{domxref("Node.innerText")}}</li> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> + <li>HTML in einen DOM-Baum parsen: {{domxref("DOMParser")}}</li> + <li>Serialisieren von XML oder HTML in einen DOM-Baum: {{domxref("XMLSerializer")}}</li> +</ul> |