diff options
Diffstat (limited to 'files/it/web/api/document/createelement/index.html')
| -rw-r--r-- | files/it/web/api/document/createelement/index.html | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/files/it/web/api/document/createelement/index.html b/files/it/web/api/document/createelement/index.html new file mode 100644 index 0000000000..649ba72fb3 --- /dev/null +++ b/files/it/web/api/document/createelement/index.html @@ -0,0 +1,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> |