From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/web/api/document/createelement/index.html | 139 +++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 files/it/web/api/document/createelement/index.html (limited to 'files/it/web/api/document/createelement/index.html') 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 +--- +
{{APIRef("DOM")}}
+ +

In un documento HTML, il metodo document.createElement() crea l'elemento HTML specificato da tagName o un {{domxref("HTMLUnknownElement")}} se tagName non viene riconosciuto.

+ +
+

Note: In un documento XUL, crea l'elemento XUL specificato. In altri documenti, crea un elemento con un URI namespace null.

+
+ +

Sintassi

+ +
var element = document.createElement(tagName[, options]);
+
+ +

Parametri

+ +
+
tagName
+
Una stringa che specifica il tipo di elemento da creare. Il {{domxref("Node.nodeName", "nodeName")}} dell'elemento creato viene inizializzato con il valore di tagName. Non utilizzare nomi qualificati (come "html:a") con questo metodo. Quando chiamato su un documento HTML, createElement() converte tagName in minuscolo prima di creare l'elemento. In Firefox, Opera e Chrome, createElement(null) funziona come createElement("null").
+
options{{optional_inline}}
+
Un oggetto ElementCreationOptions opzionale contenente una singola proprietà denominata is, il cui valore è il nome del tag per un elemento personalizzato precedentemente definito utilizzando customElements.define(). Vedi {{anch("Esempio di componente Web")}} per ulteriori dettagli.
+
+ +

Valore di ritorno

+ +

Il nuovo {{domxref("Element")}}.

+ +

Esempi

+ +

Esempio basilare

+ +

Questo crea un nuovo <div> e lo inserisce prima dell'elemento con l'ID "div1".

+ +

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>
+
+ +

JavaScript

+ +
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);
+}
+ +

{{EmbedLiveSample("Esempio_basilare", 500, 50)}}

+ +

Esempio di componente Web

+ +

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")}}.

+ +
// 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" });
+ +

Se volessimo creare un'istanza di questo elemento a livello di codice, utilizzeremmo una chiamata seguendo le linee seguenti:

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

Al nuovo elemento verrà assegnato un attributo is il cui valore è il nome del tag dell'elemento personalizzato.

+ +
+

Note: Per la retrocompatibilità con le versioni precedenti della specifica Elementi personalizzati, 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.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.createElement")}}

+ +

Vedi anche

+ + -- cgit v1.2.3-54-g00ecf