Dans un document HTML, la méthode document.createElement() crée un élément HTML du type spécifié par tagName ou un HTMLUnknownElement si tagName n’est pas reconnu.

Syntaxe

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

Paramètres

tagName
Une chaîne de caractères (DOMString) spécifiant le type d’élément à créer. Le nodeName (nom du noeud) de l’élément créé est initialisé avec la valeur de tagName. N’utilisez pas le nom qualifié (comme "html:a") avec cette méthode. Quand elle est appelée sur un document HTML, createElement() convertit tagName en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, createElement(null) fonctionne comme createElement("null").
optionsFacultatif

Un objet ElementCreationOptions facultatif contenant une seule propriété nommée is dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec customElements.define(). Voir Web component example pour plus de détails.

Valeur de retour

L’objet Element créé.

Exemples

Exemple de base

Ici est créé un nouveau <div> qui est inséré avant l’élément avec l’identifiant "div1".

HTML

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

JavaScript

document.body.onload = addElement;

function addElement () {
  // crée un nouvel élément div
  var newDiv = document.createElement("div");
  // et lui donne un peu de contenu
  var newContent = document.createTextNode('Hi there and greetings!');
  // ajoute le nœud texte au nouveau div créé
  newDiv.appendChild(newContent);
  
  // ajoute le nouvel élément créé et son contenu dans le DOM
  var currentDiv = document.getElementById('div1');
  document.body.insertBefore(newDiv, currentDiv);
}

Exemple de composant web

L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la HTMLUListElement qui représente l’élément <ul>.

// Crée une classe pour l’élément
class ExpandingList extends HTMLUListElement {
  constructor() {
    // Toujours appeler « super » en premier dans le constructeur
    super();

    // définition du constructeur omise pour la brièveté
    ...
  }
}

// Définit le nouvel élément
customElements.define('expanding-list', ExpandingList, { extends: 'ul' });

Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante :

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

Le nouvel élément donnera un attribut is dont la valeur est la balise de nom de l’élément personnalisé.

Note : Pour la rétrocompatibilité avec les versions précédentes de la spécification des éléments personnalisés, quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé.

Spécification

Spécification Statut Commentaire
DOM
La définition de 'Document.createElement' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
createElementChrome Support complet 1Edge Support complet 12Firefox Support complet Oui
Notes
Support complet Oui
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 Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?
options parameterChrome Support complet Oui
Notes
Support complet Oui
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 Support complet 50
Notes
Support complet 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 Support complet Oui
Notes
Support complet Oui
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 Support complet Oui
Notes
Support complet Oui
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 Aucun support Non
Notes
Aucun support Non
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 Mobile ? Firefox Android Support complet 50
Notes
Support complet 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 Support complet Oui
Notes
Support complet Oui
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 ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Notes CSS Quantum

  • Dans Gecko, quand vous voulez créer un sous-arbre détaché (par exemple, un <div> créé avec createElement() qui n’est pas encore inséré dans le DOM), l’élément racine du sous-arbre est défini comme un élément de niveau bloc. Dans le nouveau moteur CSS parallèle de Firefox (aussi connu comme Quantum CSS ou Stylo, prévu pour être publié dans Firefox 57), il est défini comme "inline", (bug 1374994) selon la spécification.

Voir aussi

Étiquettes et contributeurs liés au document

Dernière mise à jour par : Watilin,