• Modification de contenu HTML

    Par White Tendance dans JavaScript le 19 Octobre 2018 à 06:30

    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!