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

Specifica Stato Commento
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} {{Spec2('DOM WHATWG')}}  

Compatibilità con i browser

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

Vedi anche