•  

     

     
     

  • Modification de contenu HTML

    La meilleure façon de modifier le contenu d'un élément HTML est en utilisant le innerHTML propriété.

    Pour modifier le contenu d'un élément HTML, utilisez la syntaxe suivante:

    document.getElementById(id).innerHTML = new HTML

    Cet exemple modifie le contenu d'un élément <h>:

    <html>
    <body>

    <h1 id="id01">Ancienne rubrique</h1>
    <script>
    var element = document.getElementById("id01");
    element.innerHTML = "Nouvelle rubrique";
    </script>
    </body></html>

     

    Exemple

    <!DOCTYPE html>
    <html>
    <body>

     

    <h2>JavaScript peut changer le HTML</h2>

     

    <h1 id="id01">Ancienne rubrique</h1>

     

    <p>JavaScript change Une ancienne rubrique en nouvelle rubrique".</p>

      

     <button onclick="changeh()"><span style="background-color: #000000; color: #ffffff;">Changez le contenu de h ici</span></button>

    <script>

    <span style="background-color: #FF0000; color: #ffffff;"></span>
    function changeh() {
    var element = document.getElementById("id01");
    element.innerHTML = "Nouvelle rubrique";
    }
    </script>

    <button onclick="recharge()"><span style="background-color: #FF0000; color: #ffffff;">Rechargez la page</span></button>

    <script>
    function recharge() {
    location.reload();
    }
    </script>

    </body>
    </html

    Le document HTML ci-dessus contient un élément <h> avec id = "id01"
    Nous utilisons les DOM HTML pour obtenir l'élément avec id = « id01 »
    Un JavaScript modifie le contenu (innerHTML) de cet élément en « Nouvelle rubrique »

    Résultat de l'exemple

    JavaScript peut changer le HTML

    Ancienne rubrique

    JavaScript change Une ancienne rubrique en nouvelle rubrique".


  • Modification de contenu HTML

    La meilleure façon de modifier le contenu d'un élément HTML est en utilisant le innerHTML propriété.

    Pour modifier le contenu d'un élément HTML, utilisez la syntaxe suivante:

    document.getElementById(id).innerHTML = new HTML

    Cet exemple modifie le contenu d'un élément <p>:

    <html>
    <body>
    <script><p id="p1">Salut à tous!</p>

    document.getElementById("p1").innerHTML = "New text!";
    </script>
    </body></html>

     

    Exemple

    <!DOCTYPE html>
    <html>
    <body>

    <script>

    <h2>JavaScript peut changer le HTML</h2>

    <p id="p1">Salut à tous!</p>

     <button onclick="changescript()"><span style="background-color: #000000; color: #ffffff;">Changez le script ici</span></button>

    <script>
    function changescript() {
    document.getElementById("p1").innerHTML = "Â bientôt!";
    }
    </script>

    <button onclick="recharge()"><span style="background-color: #000000; color: #ffffff;">Rechargez la page</span></button>

    <script>
    function recharge() {
    location.reload();
    }
    </script>

    </body>
    </html

    Le document HTML ci-dessus contient un élément <p> avec id = "p1"
    Nous utilisons les DOM HTML pour obtenir l'élément avec id = « p1 »
    Un JavaScript modifie le contenu (innerHTML) de cet élément en « Â bientôt! »

    Résultat de l'exemple

    JavaScript peut changer le HTML

    Salut à tous!


  • JavaScript HTML DOM - Changer HTML

     Le code HTML DOM permet à JavaScript de modifier le contenu des éléments HTML.

    Modification du flux de sortie HTML

    JavaScript peut créer du contenu HTML dynamique:

    Date: ven 19 octobre 2018 04:21:30 GMT + 0200 (heure d' été d' Europe)

    En JavaScript, document.write () peut être utilisé pour écrire directement dans le flux de sortie HTML:


    <!DOCTYPE html>
    <html>
    <body>
    <script>document.write(Date()); </script>
    </body></html>

    Ne jamais utiliser document.write () après que le document soit chargé. Il remplacerait le document.

    Exemple

    <!DOCTYPE html>
    <html>
    <body>

    <script>
    document.write(Date());
    </script>

    <button onclick="changedate()"><span style="background-color: #000000; color: #ffffff;">Avancez la date de 12 heures</span></button>

    <script>
    function changedate() {
    document.write(Date())+12 ;
    }
    </script>

    <button onclick="recharge()"><span style="background-color: #000000; color: #ffffff;">Rechargez la page</span></button>

    <script>
    function recharge() {
    location.reload();
    }
    </script>

    </body>
    </html

    Résultat de l'exemple


  • Les objets HTML suivants (et des collections d'objets) sont également accessibles: