In un documento HTML, il metodo document.createElement() crea l'elemento HTML specificato da tagName o un 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 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").
optionsOptional
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 Esempio di componente Web per ulteriori dettagli.

Valore di ritorno

Il nuovo 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); 
}

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 HTMLUListElement, che rappresenta l'elemento <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
DOM
The definition of 'Document.createElement' in that specification.
Living Standard  

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
createElementChrome Full support 1Edge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element.
IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
options parameterChrome Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Edge ? Firefox Full support 50
Notes
Full support 50
Notes
Notes Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
IE ? Opera Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari ? WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Chrome Android No support No
Notes
No support No
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Firefox Android Full support 50
Notes
Full support 50
Notes
Notes Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Vedi anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: mdnwebdocs-bot, IsibisiDev, teoli, khalid32, Federico
Ultima modifica di: mdnwebdocs-bot,