Ajouter des éléments dans le DOM¶

Nous pourrions créer des élements HTML directement en éditant le code HTML à la source du DOM. Toutefois, la création d’éléments en HTML sera, dans le contexte de ce module plus pratique. Cela ne signifie pas qu’il faille procéder ainsi habituellement pour créer des sites web.

Créer des éléments avec document.createElement¶

Voir la documentation

document.createElement permet de créer de nouveaux éléments, des div, input, article, tout type d’élément HTML.

var reference_de_ma_div = document.createElement( 'div' );
var reference_de_mon_footer = document.createElement( 'footer' );

Toutefois, cela ne les insert pas dans le document courant !

insérer des éléments avec element.appendChild¶

Voir la documentation

element.appendChild permet d’ajouter un élément à la fin d’un autre.

Par exemple partons de la structure suivante :

<body>
   <h1></h1>
</body>

Si l’on souhaite ajouter une div avec document.body.appendChild( reference_de_ma_div ), la div se placera à la fin du body comme suit :

<body>
   <h1></h1>
   <div></div>
</body>

Si l’on poursuit par exemple en ajoutant un footer avec document.body.appendChild( reference_de_mon_footer ) :

<body>
   <h1></h1>
   <div></div>
   <footer></footer>
</body>

Modifier le contenu d’un élément avec la propriété innerHTML¶

Il est possible d’ajouter du contenu à un élément en modifiant sa propriété innerHTML :

reference_de_ma_div.innerHTML = '<p>un paragraphe</p>';

<body>
   <h1></h1>
   <div><p>un paragraphe</p></div>
   <footer></footer>
</body>

exemple complet¶

L’exemple suivant utilise les différents éléments vus plus haut :

var emojis = ['🐖','🐄','🐏','🐆','🐃','🐈','🐎','🦍','🐕','🦌','🐂','🐐','🐪','🦒'];
for (var i = 0; i < 100; i++) {
   var element = document.createElement( 'span' );
   element.innerHTML = emojis[ Math.floor( Math.random() * emojis.length )];
   document.body.appendChild( element );
}

exercice¶

Avertissement

Il s’agit ici d’appliquer et de vérifier votre compréhension, ne sautez pas cette étape, et ne faites pas de copier-coller.

Dans l’éditeur de code de votre choix, créer un script en suivant les instructions ci-dessous, et l’exécuter soit dans la console du navigateur sur un onglet vide, soit dans un éditeur de code en ligne avec prévisualisation :

// 1. créer un élément HTML du type de votre choix

// 2. ajoutez-lui un contenu

// 3. insérer-le dans l'élément body