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
DOM
ayant pourtagName
cette 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
.
-
-
copy
Facultatif: indique si, dans le cas où des élémentsDOM
sont 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. -
name
Facultatif: 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
DOM
de leur parent.