Dernière mise à jour le .
- Dynamique
- >
- Modules
- >
- DOM
- >
- createElement
DOM.createElement
Crée un ou plusieurs éléments DOM.
Synthaxe
DOM.createElement(arg1[, ..., argN][, copy]);
DOM.createElement(arg1[, ..., argN][, copy, name]);
Où:
-
arg1...argN: le comportement de la méthode change en fonction du type d'argument donné:-
(1) : si l'argument est une chaine de caractère, un élément
DOMayant pourtagNamecette chaine de caractère sera créé; -
(2) : si l'argument est un tableau, chaque case peut être de deux types:
-
: même comportement que (1).
-
: même comportement que (3).
Dans tous les autres cas, rien n'est fait.
-
-
(3) : si l'argument est un objet, un élément DOM ayant pour tagName la valeur de la propriété tagName de cet objet est créé puis ses propriétés sont étendues de chacune des propriétés de cet objet.
-
(4) : si l'arguments est un élément
DOM(fragment de document compris), l'élement sera soit copié soit déplacé en fonction de l'argumentcopy.
-
-
copyFacultatif: indique si, dans le cas où des élémentsDOMsont passés en arguments, ces derniers doivent être copié ou non. Dans le cas où les éléments sont copiés, les éléments ne sont pas déplacés lors de leur manipulation, seules leurs copies le sont. Dans le cas où les éléments ne sont pas copiés, la manipulation des éléments les affectera directement. -
nameFacultatif: indique le nom de la propriété déterminant le nom de l'élément créé.
Valeur de retour
Le contexte englobant this est retourné.
Exemple sans Dynamique
L'utilisation de cette méthode sans dynamique n'est pas encore supportée.
Exemple avec Dynamique
Exemple 1: Création d'un titre simple
L'exemple ci-dessous crée un titre h1 puis l'insert comme dernier noeud enfant de body.
Dynamique().createElement("h1").insertLast(document.body);
Exemple 2: Création d'un titre avec des attributs et propriétés diverses
L'exemple ci-dessous crée un titre h1 en lui associant des attributs et propriétés
puis l'insert comme dernier noeud enfant de body.
Dynamique().createElement({
tagName : "h1",
className : "color-red",
dataset : {
content : "contenu"
},
attributes : {
// ...
},
value : 1,
event : {
click : () => alert("Click !");
}
// ...
}).insertLast(document.body);
Exemple 3: Copie d'un élément
L'exemple ci-dessous copie un titre h1 puis l'insert comme dernier noeud enfant de body.
Dynamique().createElement(Dynamique("#myTitleH1")[0], true).insertLast(document.body);
Exemple 4: Déplacement d'un élément
L'exemple ci-dessous sélectionne le titre h1 puis l'insert comme dernier noeud enfant de body.
Dynamique().createElement(Dynamique("#myTitleH1")[0]/*, false*/).insertLast(document.body);
Exemple 5: Utilisation de nom
L'exemple ci-dessous sélectionne le titre h1 puis l'insert comme dernier noeud enfant de body.
const dyna = Dynamique().createElement({
tagName : "h1",
_name : "title"
}, {
tagName : "h2"
}, true /* ou false */, "_name");
// dyna est un tableau dynamique contenant la balise h1 et h2
// dyna.title est un tableau dynamique contenant uniquement l'élément DOM h1
Compatibilité
Méthode codée en EcmaScript 6.
Méthodes liées
-
Méthode removeElement: Supprime des éléments
DOMde leur parent.