1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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>
|
