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. .. code-block:: javascript 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 : .. code-block:: html

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 : .. code-block:: html

Si l'on poursuit par exemple en ajoutant un footer avec ``document.body.appendChild( reference_de_mon_footer )`` : .. code-block:: html

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 : .. code-block:: javascript reference_de_ma_div.innerHTML = '

un paragraphe

'; .. code-block:: html

un paragraphe

exemple complet *************** L'exemple suivant utilise les différents éléments vus plus haut : .. code-block:: javascript 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 ******** .. warning:: 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 `_ : .. code-block:: javascript // 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