document.createElement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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. LenodeName
(nom du noeud) de l'élément créé est initialisé avec la valeur detagName
. N'utilisez pas le nom qualifié (comme"html:a"
) avec cette méthode. Quand elle est appelée sur un document HTML,createElement()
convertittagName
en minuscules avant de créer l'élément. Dans Firefox, Opera et Chrome,createElement(null)
fonctionne commecreateElement("null")
. - optionsFacultatif
-
Un objet
ElementCreationOptions
facultatif contenant une seule propriété nomméeis
dont la valeur est le nom de balise d'un élément personnalisé précédemment défini aveccustomElements.define()
. Voir Exemple de composant web 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écifications
Specification |
---|
DOM Standard # ref-for-dom-document-createelement① |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
Node.removeChild()
Node.replaceChild()
Node.appendChild()
Node.insertBefore()
Node.hasChildNodes()
document.createElementNS()
— pour spécifier explicitement l'URI de l'espace de noms de l'élément.