||Working with elements||

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

Syntaxe

Paramètres

Valeur de retour

Exemples

Exemple de base

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

` qui est inséré avant l’élément avec l’identifiant `"div1"`. -

HTML

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

+```html + + + + ||Working with elements|| + + +

The text above has been created dynamically.

+ + +``` -

JavaScript

+#### JavaScript -

document.body.onload = addElement;
+```js
+document.body.onload = addElement;
 
 function addElement () {
   // crée un nouvel élément div
@@ -66,15 +65,17 @@ function addElement () {
   // ajoute le nouvel élément créé et son contenu dans le DOM
   var currentDiv = document.getElementById('div1');
   document.body.insertBefore(newDiv, currentDiv);
-}

+} +``` -

+{{EmbedLiveSample("Basic_example", 500, 50)}} -

Exemple de composant web

+### 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 {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}.

+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 {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}. -

// Crée une classe pour l’élément
+```js
+// Crée une classe pour l’élément
 class ExpandingList extends HTMLUListElement {
   constructor() {
     // Toujours appeler « super » en premier dans le constructeur
@@ -86,52 +87,38 @@ class ExpandingList extends HTMLUListElement {
 }
 
 // Définit le nouvel élément
-customElements.define('expanding-list', ExpandingList, { extends: 'ul' });

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

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

+```js +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é.

+Le nouvel élément donnera un attribut [`is`](/docs/Web/HTML/Global_attributes/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é.

+> **Note :** Pour la rétrocompatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), 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 - - - - - - - - - - - - - -

Spécification	Statut	Commentaire
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}	{{Spec2('DOM WHATWG')}}

+| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

Notes CSS Quantum

+### Notes CSS Quantum -

Dans Gecko, quand vous voulez créer un sous-arbre détaché (par exemple, un {{htmlelement("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.

+- Dans Gecko, quand vous voulez créer un sous-arbre détaché (par exemple, un {{htmlelement("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](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour être publié dans Firefox 57), il est défini comme "inline", ({{bug(1374994)}}) selon la spécification. -

Voir aussi

+## Voir aussi -

{{domxref("Node.removeChild()")}}
{{domxref("Node.replaceChild()")}}
{{domxref("Node.appendChild()")}}
{{domxref("Node.insertBefore()")}}
{{domxref("Node.hasChildNodes()")}}
{{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément.

+- {{domxref("Node.removeChild()")}} +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Node.insertBefore()")}} +- {{domxref("Node.hasChildNodes()")}} +- {{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément. -- cgit v1.2.3-54-g00ecf