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>