Chaque élément d'une page HTML qui est séparé par deux tags HTML <tag></tag> peut ête modifié par la propriété innerHTML.
Il est possible de modifier un élément de la page HTML en utilisant cette propriété. Cela rend les pages plus interactives.
Exemple 1
<script type="text/javascript"> function changeText(){ document.getElementById('nom').innerHTML = 'Brad Pitt'; } </script> <p>Bienvenue dans ce site, <b id='nom'>mon ami</b>, je suis heureux que tu t'intéresses à JavaScript.</p> <input type='button' onclick='changeText()' value='Change le nom'/>
Bienvenue dans ce site, mon ami, je suis heureux que tu t'intéresses à JavaScript.
Exemple 2
<script type="text/javascript"> function afficher(){ document.getElementById('span_res').innerHTML=document.getElementById('t').value; } </script> Entrez du texte et appuyez sur la touche <em>enter</em> : <input onkeypress="if(event.keyCode==13)afficher()" id="t"><br/> Vous avez écrit : <b><span id="span_res"></span></b>
Entrez du texte et appuyez sur la touche enter :
Vous avez écrit :
Exercice 1
//L'utilisateur entre ses donnĂ©es personnelles. En cliquant sur le bouton, //elles s'affichent dans la div id="res". //L'exercice se trouve dans l'éditeur. Cliquez ici. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> Ex 7-7-1 Corrigé</title> <script type="text/javascript"> function affiche(){ //Complétez ici } </script> </head> <body> Nom : <input type='text' id="nom" /><br/> Prénom : <input type='text' id="prenom" /><br/> Ville : <input type='text' id="ville" /><br/> <button type='button' onclick="affiche()"> Envoi </button><br/><hr/><br/> <div style="width:500px;heigh:auto;background:#C0C0C0;font-family:Courier;font-size:12px;" id="res"> </div> </body> </html>