La propriété innerHTML
La propriété JavaScript innerHTML remplace complètement le contenu d’un élément sélectionné en y insérant un nouveau contenu au format HTML. Elle permet par exemple d’écrire du code HTML à un endroit précis, sans recharger la page, suite à des évènements.
Syntaxe
Pour changer le contenu d’un élément par un id, on pourra écrire ceci :
document.getElementById('nom').innerHTML = "Code HTML à écrire";
Cet exemple appelle une fonction et inscrit le résultat dans le paragraphe id= »exemple » :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Changer le texte</title>
<meta charset="utf-8">
</head>
<body>
<p id="exemple">Cliquez sur le bouton et ce texte changera.</p>
<input type="button" value="clic" onclick="changetexte()">
<script>
function changetexte() {
document.getElementById("exemple").innerHTML = "Texte changé !";
}
</script>
</body>
</html>Cet exemple appelle une fonction qui effectue un calcul puis inscrit le résultat dans une balise <p> :
<!DOCTYPE html>
<html>
<head>
<title>Calcul</title>
<meta charset="utf-8">
</head>
<body>
<p id="exemple"></p>
<script>
function superFonction(a, b) {
return a * b;
}
document.getElementById("exemple").innerHTML = superFonction(4, 3);
</script>
</body>
</html>Image agrandie
Suite au clic sur une vignette, le code ci-dessous insère une image agrandie avec la propriété innerHTML. L’image agrandie est préchargée, sans être affichée, grâce à la propriété CSS display: none.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bébel mon héros</title>
<meta charset="utf-8">
<script>
function zoom() {
document.getElementById("agrandir").innerHTML = "<img src='grande.jpg' style='position:absolute; top:50px; left:50px; z-index:1; cursor:pointer' onclick='dezoom()' title='Fermer' alt='Belmondo'>";
}
function dezoom() {
document.getElementById("agrandir").innerHTML = "";
}
</script>
</head>
<body>
<img src="vignette.jpg" onclick="zoom()" style="cursor:pointer" alt="Belmondo">
<p>Jean-Paul Belmondo, né le 9 avril 1933 à Neuilly-sur-Seine, est un acteur français. Il a également été producteur de cinéma et directeur de théâtre.Alternant dans les premières années de sa carrière les films populaires et d'Art et Essai avant de pencher nettement pour la première catégorie, il est rapidement devenu l'une des plus grandes vedettes du cinéma français, champion incontesté du box-office au même titre que Louis de Funès et Alain Delon à la même époque. En cinquante ans de carrière, il a attiré dans les salles près de 130 millions de spectateurs : entre 1969 et 1982, il a joué à quatre reprises dans le film le plus vu de l'année en France (Le Cerveau, Peur sur la ville, L'Animal, L'As des as), égalant le record de Fernandel et n'étant dépassé sur ce point que par Louis de Funès.
</p>
<div id="agrandir"></div>
<img src="grande.jpg" alt="Belmondo" style="display: none">
</body>
</html>
La machine à écrire de Michel Audiard
Pour finir en beauté, voici une petite mécanique assez complexe d’insertion de texte au sein de la balise HTML <q> avec un effet d’animation similaire à une « machine à écrire ».
- Les textes de Michel Audiard sont écrits caractère par caractère avec innerHTML et au ralenti, grâce à la méthode setInterval() qui appelle la fonction machineEcrire() tous les dixièmes de seconde.
- La méthode charAt() retourne le caractère de la phrase à l’emplacement spécifié.
- message.length renvoie le nombre de caractères de la chaine message.
- message.substr(0,cour) extrait un certain nombre de caractères, précisé dans la variable cour, à partir du début de la chaine message.
- La méthode clearInterval() arrête le setInterval() quand le dernier caractère des citations est atteint.
- La balise de citation <q> ajoute les guillemets en début et fin de phrase.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Machine à écrire</title>
<meta charset="utf-8">
<style>
q {
font-size: 2em;
}
.ecrire {
color: #fff;
background-color: #000;
padding: 3px;
font-weight: bold;
}
</style>
<script>
const message = "Un secret consiste à ne le répéter qu'à une seule personne à la fois. Quand on mettra les cons sur orbite, t'as pas fini de tourner. Un intellectuel assis va moins loin qu'un con qui marche.";
let cour = 0;
const animation = setInterval("machineEcrire()", 100);
function machineEcrire() {
document.getElementById('citation').innerHTML = message.substr(0, cour) + "<span class='ecrire'>" + message.charAt(cour) + "</span>";
if (cour == message.length)
clearInterval(animation);
else
cour++;
}
</script>
</head>
<body>
<q id="citation"></q>
</body>
</html>Ce code affichera progressivement trois citations à l’écran :
