diff options
Diffstat (limited to 'files/de/web/api/document/createelement/index.html')
| -rw-r--r-- | files/de/web/api/document/createelement/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/de/web/api/document/createelement/index.html b/files/de/web/api/document/createelement/index.html new file mode 100644 index 0000000000..8b053c1379 --- /dev/null +++ b/files/de/web/api/document/createelement/index.html @@ -0,0 +1,153 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Méthode +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + + + +<p>In einem <a href="/de/docs/Web/HTML">HTML </a>Dokument erstellt die <strong><code>Document.createElement()</code></strong> Methode ein spezifiziertes HTML Element oder ein {{domxref("HTMLUnknownElement")}} wenn der gegebene Elementname ein unbekannter ist.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName</var></em>, [optionen]); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><strong><code>tagName</code></strong></dt> + <dd>Ein String der den Typ des zu erstellenden Elements spezifiziert. Der/Die/Das {{domxref("Node.nodeName", "nodeName")}} des erstellten Elements ist mit dem Wert von <code>tagName</code> initialisiert. Benutze keine qualifizierten Namen (wie "html:a") mit dieser Methode.</dd> + <dt><code>optionen</code> {{optional_inline}}</dt> + <dd>Ein optionales <code>ElementCreationOptions</code>-Objekt, welches eine einzige Eigenschaft namens <code>is</code> besitzt, deren Wert der Name des Tags für ein benutzerdefiniertes Element ist. Dieses benutzerdefinierte Element muss vorher mit <code>customElements.define()</code> definiert werden. Für mehr Informationen siehe {{anch("Web component example")}}.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das neue <code><a href="/de/docs/Web/API/Element">Element</a></code>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Grundlegendes_Beispiel">Grundlegendes Beispiel</h3> + +<p>Dies erstellt ein neues <code><div></code> und fügt es vor dem Element mit der ID <code>div1</code> ein.</p> + +<div> +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>||Arbeiten mit Elementen||</title> +</head> +<body> + <div id="div1">Der obere Text wurde dynamisch erstellt.</div> +</body> +</html></pre> +</div> + +<h4 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h4> + +<pre class="brush:js">document.body.onload = addElement; + +function addElement () { + // erstelle ein neues div Element + // und gib ihm etwas Inhalt + var newDiv = document.createElement("div"); + var newContent = document.createTextNode("Hi there and greetings!"); + newDiv.appendChild(newContent); // füge den Textknoten zum neu erstellten div hinzu. + + // füge das neu erstellte Element und seinen Inhalt ins DOM ein + var currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +} +</pre> + +<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p> + +<h3 id="Web-Komponentenbeispiel">Web-Komponentenbeispiel </h3> + +<p>Das folgende Beispiel wurde aus dem Beispiel expanding-list-web-component entnommen (Siehe es live). In diesem Fall erweitert unser Custom-Element die {{domxref("HTMLUListElement")}}, welche das {{htmlelement("ul")}} Element repräsentiert. </p> + +<pre><code>// Erstelle eine Klasse für das Element +class ExpandingList extends HTMLUListElement { + constructor() { + // Rufe immer super() in einem Konstruktor auf. + super(); + + // Konstruktordefinition wurde der kürze halber weggelassen + ... + } +} + +// Definiere das neue Element +customElements.define('expanding-list', ExpandingList, { extends: "ul" });</code></pre> + +<p>Würden wir eine Instanz dieses Elements programmatisch erstellen wollen, so würden wir einen Aufruf über den folgenden Ausschnitt machen: </p> + +<pre><code>let expandingList = document.createElement('ul', { is : 'expanding-list' })</code></pre> + +<p>Dem neuen Element wird ein <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is">is</a></code> Attribut hinzugefügt, dessen Wert das Custom-Element's Tag-Name ist. </p> + +<div class="note"> +<p><strong>Notiz:</strong> Für Backwards-Kompatiblität mit früheren Versionen der Spezifikationen des Custom-Elements, erlauben einige Browser einen String, statt einem Objekt, als Parameter zu übergeben, wobei der Wert des Strings der Tag-Name des Custom-Elements ist. </p> +</div> + +<h2 id="Notizen">Notizen</h2> + +<ul> + <li>Beim Aufruf auf ein als Dokument-Objekt gekennzeichnetes HTML-Dokument schreibt <code>createElement()</code> seine Argumente in Kleinbuchstaben, bevor es das diese erstellt.</li> + <li>Um ein Element mit qualifizierem Namen und namespace URl zu erstellen nutze {{ domxref("document.createElementNS()") }} stattessen .</li> + <li>Vor Gecko 2.0 {{ geckoRelease("2.0") }}, konntest du abgewinkelte Klammern (< und >) um <code>tagName</code> im Quirks-Modus setzen; seit Gecko 2.0 verhält sich die Funktion im Quirks-Modus und im Standard-Modus gleich.</li> + <li>Seit Gecko 19.0 {{geckoRelease("19.0")}} <code>createElement(null)</code> hat das gleiche bewirkt wie <code>createElement("null")</code>. Bemerke, dass Opera funktioniert mit null ebenfalls, während Chrome und Internet Explorer beide Fehler ausgeben würden.</li> + <li>Seit Gecko 22.0 {{geckoRelease("22.0")}} benutzt <code>createElement()</code> nicht mehr die {{domxref("HTMLSpanElement")}} Schnittstelle, wenn das Argument "bgsounds", "multicol", oder "image" ist. Stattdessen wird <code>HTMLUnknownElement</code> für"bgsound" und "multicol" verwendet, und {{domxref("HTMLElement")}} <code>HTMLElement</code> wird für "image" verwendet.</li> + <li>Die Gecko Implementierung von <code>createElement</code> ist nicht konform mit der DOM Spezifikation für XUL und XHTML Dokumente: <code>localName</code> und <code>namespaceURI</code> werden beim erstellten Element nicht auf <code>null</code> gesetzt.<code>.</code> Siehe auch {{ Bug(280692) }} für weitere Details.</li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">DOM 2 Core: createElement</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> +</ul> + +<h2 id="Browser-Kompatibiltät">Browser-Kompatibiltät</h2> + +<p>{{Compat("api.Document.createElement")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + + + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("document.createElementNS()")}} — um die Namespace-URL explizit anzugeben.</li> +</ul> |