path: root/files/de/web/api/element/innerhtml/index.html

---
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>&amp;</code>, <code>&lt;</code> oder <code>&gt;</code> enthält, gibt <code>innerHTML</code> diese Zeichen als ihre entsprechende HTML-Entitäten <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code> bzw. <code>"&amp;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>"&lt;"</code> durch die HTML-Entität <code>"&amp;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 = "&lt;pre&gt;" +
         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
            "&lt;/pre&gt;";</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>&lt;template&gt;</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 = "&lt;script&gt;alert('Ich bin John in einem störenden Alert!')&lt;/script&gt;";
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 = "&lt;img src='x' onerror='alert(1)'&gt;";
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 + "&lt;br/&gt;";
}

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 &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
  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">&lt;div class="box"&gt;
  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
  &lt;div class="log"&gt;&lt;/div&gt;
&lt;/div&gt;</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>&lt;div&gt;</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>