Comment changer le contenu d'un div sans recharger la page?

Voici un exemple tout simple en Javascript qui permet de changer le contenu d'un div sans recharger la page.

Exemple :

Premier texte Second texte Troisième texte
Ici c'est l'emplacement du "div" qui affiche le texte sans recharger la page.

Le script :
<script language="JavaScript" type="text/javascript">
function AFFICHE(mon_texte){
	document.getElementById('mon_div').innerHTML = 'Exemple : '+mon_texte+'';
}
</script>
L'affichage :
<a href="#" onclick="javascript:AFFICHE('Voici mon premier texte.');">Premier texte</a> 
<a href="#" onclick="javascript:AFFICHE('Celui-ci est mon second texte.');">Second texte</a> 
<a href="#" onclick="javascript:AFFICHE('Et celui la mon troisième texte.');">Troisième texte</a>
 
<div id="mon_div">Ici c'est l'emplacement du "div" qui affiche le texte sans recharger la page.</div>
document.getElementById renvoie l'élément dont l'ID est celui spécifié.
 Dans le cas présent, l'id présent dans la fonction Javascript se nomme mon_div et renvoie sur le div portant le même id.

innerHTML est une propriété qui désigne le contenu qui se trouve entre la balise entrante et la balise fermante de tout élément HTML .

Dans les liens, on utlise la fonction onclick pour faire appel à la fonction AFFICHE() qui passe en argument le texte qu'elle contient.

Vous pouvez voir un exemple plus poussé sur cette page : Exemple d'une playlist affichant un div sans recharger la page
Voir/déposer un commentaire (0) | Signaler un problème