script

javascript

php

css

Créer et insérer facilement des éléments HTML dans le DOM, avec un minimum de code.

CRéER DES éLéMENTS HTML

Concept

Ce bout de code minimaliste rend simple comme bonjour la création et l'insertion d'éléments HTML dans la page.

Démo

Code

Malgré sa concision, ce bout de code autorise plusieurs actions :

Créer un élément

L'usage le plus élémentaire est de créer un élément HTML, en indicant seulement le type d'élément à créer.
Dans l'exemple suivant, une élément de paragraphe (<p></p>) est créé.

var parag = newElem( "p" ); // l'élément créé est retourné par la fonction

Le fait d'avoir récupéré l'élément dans la variable parag nous permet de le manipuler par la suite.

parag.innerHTML = "hello world"; // on insère du texte dans l'élément créé.

Notez que l'élément n'est pas inséré aussitôt dans la page. Il constitue donc une sorte de fantôme, qui peut être manipulé sans que cela se voit, et inséré plus tard (toujours grâce à newElem, comme nous verrons un peu plus bas).

Créer un élément, et l'insérer dans la page

Mais on peut tout aussi bien décider de créer l'élément et de l'insérer aussitôt dans la page. Il suffit pour cela d'ajouter un second argument à la fonction, qui indique où insérer cet élément, en désignant l'élément parent.
Dans l'exemple suivant, on insère un nouvel élément de liste dans une liste déjà existante. Supposons la liste suivante :

<ul id="heros">
	<li>Agamemnon</li>
	<li>Achille</li>
	<li>Hector</li>
</ul>

newElem nous permet d'insérer un élément dans la liste

var listElem, parent;
parent = document.getElementById( "heros" );
listElem = newElem( "li", parent ); // insérer un élément dans la liste
listElem.innerHTML = "Ulysse"; // renseigner le contenu de cet élément

Ce qui donne le résultat suivant :

<ul id="heros">
	<li>Agamemnon</li>
	<li>Achille</li>
	<li>Hector</li>
	<li>Ulysse</li>
</ul>

Créer un élément, et l'insérer dans la page avec plus de précision

Par défaut, l'élément inséré est positionné à la fin de son parent. Mais newElem donne également la possibilité de le placer à une autre position.
Ainsi, en reprenant l'exemple de la liste précédente, on peut préférer insérer notre nouvel élément en deuxième position de la liste :

var parent, insertBefore, listElem;
 
parent = document.getElementById( "heros" ), // la liste dans laquelle on veut insérer le nouvel élément
insertBefore = parent.getElementsByTagName( "li" )[ 1 ], // l'élément de liste avant lequel on souhaite insérer le nouvel élément (rappelons qu'en javascript le deuxième élément porte le numéro 1).
listElem = newElem( "li", parent, insertBefore ); // insérer l'élément dans la liste, avant le second élément de cette liste.
 
listElem.innerHTML = "Ulysse"; // renseigner le contenu de cet élément

Cette fois-ci on obtiendra donc :

<ul id="heros">
	<li>Agamemnon</li>
	<li>Ulysse</li> <!-- Ulysse est en deuxième position -->
	<li>Achille</li>
	<li>Hector</li>
</ul>

Manipuler des éléments fantômes

Comme je l'annonçais plus haut, newElem permet également d'insérer dans la page des éléments à l'état de fantômes.
On aura créé un fantôme, comme décrit plus haut :

var parag;
parag = newElem( "p" );
parag.innerHTML = "hello world";

Et on pourra ensuite l'insérer dans la page, comme décrit plus haut aussi (mais plus bas !!)

newElem( parag, document.getElementById( "jesaispasquoi" ) );

Quel intérêt, me direz-vous de faire en deux fois ce qui peut être fait d'un seul coup ?
Eh bien le principal intérêt est une question de vitesse de rendu. Il faut savoir que les navigateurs manipulent avec beaucoup plus de rapidité les éléments fantômes que les éléments présents dans la page. Dès lors, si vous avez un certain nombre d'opérations à effectuer sur l'élément créé (lui attribuer une classe css, y insérer d'autres éléments, etc.), il sera plus rapide de créer un élément fantôme, de le manipuler et enfin de l'insérer dans la page, que de le créer et l'insérer dans la page avant de le manipuler.

On préférera donc cette façon de faire :

// bien :
var parag = newElem( "p" );
doSomeThing( parag );
newElem( parag, document.getElementById( "jesaispasquoi" ) );

A cette autre façon de faire :

// pas bien :
var parag = newElem( "p", document.getElementById( "jesaispasquoi" ) );
doSomeThing( parag );

Téléchargement

Vous trouverez dans ce zip deux versions du script : l'une minifiée (104 octets !), et l'autre commentée. 

Mais le plus simple, c'est peut-être simplement de recopier le code :

function newElem(a,b,c){a=a.nodeType?a:document.createElement(a),b&&b.insertBefore(a,c||null);return a}

 

compatibilité :

(autres navigateurs non testés)

Commentaires