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, 0 insertions, 139 deletions
diff --git a/files/it/web/api/document/createelement/index.html b/files/it/web/api/document/createelement/index.html deleted file mode 100644 index 649ba72fb3..0000000000 --- a/files/it/web/api/document/createelement/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -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> |