Document.createElement()

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

BCD tables only load in the browser

Vedi anche