View  Edit  Attributes  History  Attach  Print  Search

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  -->