Dernière mise à jour le .
  1. Dynamique
  2. >
  3. Modules
  4. >
  5. DOM
  6. >
  7. 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 pour tagName 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'argument copy.

  • copy Facultatif: indique si, dans le cas où des éléments DOM 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