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
|
---
title: Document.createElement()
slug: Web/API/Document/createElement
tags:
- API
- DOM
- Document
- Referenza
- createElement
- metodo
translation_of: Web/API/Document/createElement
---
<div>{{APIRef("DOM")}}</div>
<p><span class="seoSummary">In un documento <a href="/en-US/docs/Web/HTML">HTML</a>, il metodo <strong><code>document.createElement()</code></strong> crea l'elemento HTML specificato da <var>tagName</var> o un {{domxref("HTMLUnknownElement")}} se <var>tagName</var> non viene riconosciuto.</span></p>
<div class="note">
<p><strong>Note</strong>: In un documento <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, crea l'elemento XUL specificato. In altri documenti, crea un elemento con un URI namespace <code>null</code>.</p>
</div>
<h2 id="Sintassi">Sintassi</h2>
<pre class="brush: js">var <var>element</var> = <var>document</var>.createElement(<var>tagName</var>[, <var>options</var>]);
</pre>
<h3 id="Parametri">Parametri</h3>
<dl>
<dt><var>tagName</var></dt>
<dd>Una stringa che specifica il tipo di elemento da creare. Il {{domxref("Node.nodeName", "nodeName")}} dell'elemento creato viene inizializzato con il valore di <var>tagName</var>. Non utilizzare nomi qualificati (come "html:a") con questo metodo. Quando chiamato su un documento HTML, <code>createElement()</code> converte <var>tagName</var> in minuscolo prima di creare l'elemento. In Firefox, Opera e Chrome, <code>createElement(null)</code> funziona come <code>createElement("null")</code>.</dd>
<dt><var>options</var>{{optional_inline}}</dt>
<dd>Un oggetto <code>ElementCreationOptions</code> opzionale contenente una singola proprietà denominata <code>is</code>, il cui valore è il nome del tag per un elemento personalizzato precedentemente definito utilizzando <code>customElements.define()</code>. Vedi {{anch("Esempio di componente Web")}} per ulteriori dettagli.</dd>
</dl>
<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
<p>Il nuovo {{domxref("Element")}}.</p>
<h2 id="Esempi">Esempi</h2>
<h3 id="Esempio_basilare">Esempio basilare</h3>
<p>Questo crea un nuovo <code><div></code> e lo inserisce prima dell'elemento con l'ID "<code>div1</code>".</p>
<h4 id="HTML">HTML</h4>
<pre class="brush:html"><!DOCTYPE html>
<html>
<head>
<title>||Lavorare con gli elementi||</title>
</head>
<body>
<div id="div1">Il testo sopra è stato creato dinamicamente.</div>
</body>
</html>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush:js">document.body.onload = addElement;
function addElement() {
// crea un nuovo elemento div
var newDiv = document.createElement("div");
// ed assegnargli un contenuto
var newContent = document.createTextNode("Hi there and greetings!");
// aggiungi il nodo di testo al div appena creato
newDiv.appendChild(newContent);
// aggiungi l'elemento appena creato e il suo contenuto nel DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}</pre>
<p>{{EmbedLiveSample("Esempio_basilare", 500, 50)}}</p>
<h3 id="Esempio_di_componente_Web">Esempio di componente Web</h3>
<p>Il seguente frammento di esempio è tratto dal nostro esempio di componente di espansione list-web (vedi anche live). In questo caso, il nostro elemento personalizzato estende {{domxref("HTMLUListElement")}}, che rappresenta l'elemento {{htmlelement("ul")}}.</p>
<pre class="brush: js">// Crea una classe per l'elemento
class ExpandingList extends HTMLUListElement {
constructor() {
// Chiama sempre super prima nel costruttore
super();
// definizione del costruttore lasciata fuori per brevità
...
}
}
// Definisce il nuovo elemento
customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
<p>Se volessimo creare un'istanza di questo elemento a livello di codice, utilizzeremmo una chiamata seguendo le linee seguenti:</p>
<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre>
<p>Al nuovo elemento verrà assegnato un attributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/is">is</a></code> il cui valore è il nome del tag dell'elemento personalizzato.</p>
<div class="note">
<p><strong>Note</strong>: Per la retrocompatibilità con le versioni precedenti della <a href="https://www.w3.org/TR/custom-elements/">specifica Elementi personalizzati</a>, alcuni browser ti permetteranno di passare una stringa qui invece di un oggetto, dove il valore della stringa è il nome del tag dell'elemento personalizzato.</p>
</div>
<h2 id="Specifiche">Specifiche</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specifica</th>
<th scope="col">Stato</th>
<th scope="col">Commento</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>
<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
<p>{{Compat("api.Document.createElement")}}</p>
<h2 id="See_also" name="See_also">Vedi anche</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()")}} — per specificare esplicitamente l'URI namespace per l'elemento.</li>
</ul>
|
