ICTFF Section Informatique

Référence générale

L'objet document du DOM contient les méthodes permettant de créer de nouveau objet element sur la page.

Pour les objets contenus dans le DOM cliquer ici et ensuite dans HTML DOM Reference choisir l'objet document.

Créer dynamiquement une balise

Pour créer une nouvelle balise HTML on utilise la méthode createElement() de l’objet Document à laquelle on passe la balise à créer en paramètre.
Les balises ouvrantes et fermantes sont créées.

Générallement on suit la démarche suivante:

on crée la balise avec createElement()
on ajoute un ou plusieurs attributs avec setAttribute(), méthode de l'objet element
on y ajoute du contenu avec innerHTML(), méthode de l'objet element
on y associe des une ou plusieurs classes avec className(), méthode de l'objet element

Démo
<head>
<meta charset="utf-8">
<style>
	.coul	{color:red;}
	.deco	{text decoration:underline;}
</style>
</head>
<body>
<h1>Ma jolie balise ainsi créée...</h1>

<script>
var mabal=document.createElement("p");
mabal.setAttribute("id","p1");
mabal.innerHTML="La propriété c'est le vol!";
mabal.className="coul deco";
console.log(mabal);
document.write(mabal);
document.write(mabal.outerHTML);
</script>
</body>

Créer dynamiquement du texte

Pour créer un nouveau contenu textuel on utilise la méthode createTextNode() de l’objet Document à laquelle on passe la chaîne de caractères en paramètres.

Démo
var textajout=document.createTextNode("Je vous parle d'un temps que...");
console.log(textajout);

Le texte "Je vous parle d'un temps que..." est effectivement créée, il existe dans la mémoire stocké dans la variable textajout, mais pour l'instant il n'est attachée à aucun élément, c'est-à-dire à aucun parent.

Ajouter des éléments dans le document

On utilise trois méthodes:

appendChild() va toujours insérer un objet en tant que dernier enfant de l’objet de type Element indiqué.
insertBefore() admet 2 paramètres, le premier correspond à la balise à insérer, le second la balise avant laquelle il faut l'insérer.

Exemple 1: appenChild()

Démo
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Mon beau site web</title>
	<style>
		.c1	{color:red;}
		.c2	{color:green;}
	</style>
</head>

<body>
	<h1 id=maintitre>Un beau contenu</h1>
	<p>Je vous présente mon site.</p>
	<p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
	<p class=c1>Super ce site.</p>
	<p class=c1>Et vous n'avez pas tout vu!</p>
	<p class=c1>Hop hop hop!</p>
	
	<script>
		var mabal=document.createElement("p");
		mabal.setAttribute("id","p1");
		mabal.innerHTML="La propriété c'est le vol!";
		mabal.className="c1";
		document.body.appendChild(mabal);
	</script>
</body>

</html>

Exemple 2: appenChild() un texte

Démo
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Mon beau site web</title>
	<style>
		.c1	{color:red;}
		.c2	{color:green;}
	</style>
</head>

<body>
	<h1 id=maintitre>Un beau contenu</h1>
	<p>Je vous présente mon site.</p>
	<p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
	<p class=c1>Super ce site.</p>
	<p class=c1>Et vous n'avez pas tout vu!</p>
	<p class=c1>Hop hop hop!</p>
	
	<script>
	var mabal=document.createElement("p");
	var textajout=document.createTextNode("Je vous parle d'un temps que...");
	mabal.appendChild(textajout);
	document.body.appendChild(mabal);
	</script>
</body>

</html>

Exemple 3: insertBefore()

Démo
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Mon beau site web</title>
	<style>
		.c1	{color:red;}
		.c2	{color:green;}
	</style>
</head>

<body>
	<h1 id=maintitre>Un beau contenu</h1>
	<p>Je vous présente mon site.</p>
	<p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
	<p class=c1>Super ce site.</p>
	<p class=c1>Et vous n'avez pas tout vu!</p>
	<p class=c1>Hop hop hop!</p>
	
	<script>
		var mabal=document.createElement("p");
		mabal.setAttribute("id","p1");
		mabal.innerHTML="La propriété c'est le vol!";
		mabal.className="c1";
		place=document.querySelector("#maintitre");
		document.body.insertBefore(mabal,place);
	</script>
</body>

</html>

Il n'existe pas de méthode insertAfter() !

Créer dynamiquement du contenu HTML