Informatique


Créer dynamiquement du contenu HTML

Aller à

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()
  • on y ajoute du contenu avec innerHTML()
  • on y associe des une ou plusieurs classes avec classname()

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>

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: 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() !