Logo Mon Club Elec

Javascript : DOM : Ajouter des éléments à la page HTML

Le DOM (Document Object Model) est un élément essentiel de la programmation web. Il permet aux développeurs de manipuler le contenu HTML et de le modifier à leur guise. Avec Javascript, il est possible d’utiliser le DOM pour ajouter des éléments à une page HTML. Cet article expliquera comment ajouter des éléments à une page HTML en utilisant le DOM et Javascript.

Javascript : DOM : Ajouter des éléments à la page HTML

Javascript : DOM : Ajouter des éléments à la page HTML
  • Dans ce code Javascript intégré dans une page HTML, on montre comment ajouter des éléments de texte à la page HTML
<!DOCTYPE HTML>

<!– Debut de la page HTML  –>
<html>
        <!– Debut entete –>
        <head>    
                <meta charset=« utf-8 » /> <!– Encodage de la page  –>
                <title>JavaScript: Test </title> <!– Titre de la page –>

                <!– Debut du code Javascript  –>
                <script language=« javascript » type=« text/javascript »>
                <!–   
 

                        //— variables globales —

                        //— fonction appelee au chargement de la page
                        window.onload = function () { // au chargement de la page        
                                // code Javascript ici, avec sa syntaxe specifique…

                                document.write(« Hello World! »); // efface le contenu de la page

                                // Ajouter un élément à la page sans effacer le reste
                        var txt = ‘Hello !’;
                        var newtext = document.createTextNode(txt);
                        document.body.appendChild(newtext);

                        document.body.appendChild(document.createElement(« br »)); // ajoute saut de ligne

                        document.body.appendChild(newtext);                    

                        } // fin onload                

                //–>
                </script>
                <!– Fin du code Javascript –>

        </head>
        <!– Fin entete –>

        <!– Debut Corps de page HTML –>
        <body >
                Ma belle page Web !                      

        </body>
        <!– Fin de corps de page HTML  –>

</html>
<!– Fin de la page HTML  –>

 

Noter cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Archive Mon Club Elec

Articles populaires

Newsletter

Inscrivez-vous maintenant et bénéficiez d'un soutien continu pour réaliser vos travaux électriques en toute sécurité.