Sommaire

Créer des éléments dans la page web

1. La première solution

Pour ce premier exemple, nous allons ajouter de nouveaux éléments HTML dans une page web, avec leur contenu textuel. Nous allons utiliser la méthode createElement(), qui permet de créer un nouvel élément HTML, et la méthode appendChild(), qui permet d’ajouter un nœud enfant à un nœud spécifié. Voici les pages consacrées à ces deux méthodes : https://developer.mozilla.org/fr/docs/Web/API/Document/createElement et https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild

Voici la structure HTML initiale :

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Mon script</title> 
    </head> 
    <body> 
        <div id="destinations"> 
 
        </div> 
    </body> 
</html>

Nous avons une boîte <div> qui possède un identifiant, id="destinations", et qui est vide de tout contenu.

Voici le script inséré dans le fichier HTML, juste avant la balise </body> :

<script> 
    // Création des deux nouveaux éléments 
    var nouvelEnTeteH2 = document.createElement(’h2’) ;  ...