Javascript : passer un texte dans une div

Bonjour,
J'ai un script en Javascript (qui n'est pas de moi) qui me permet d'afficher pleine page une photo après avoir cliqué sur la vignette de cette photo. Ce script fonctionne sans pb.
Je que je souhaite, c'est modifier ce script de façon a faire apparaitre une légende à cette photo.
Je n'ai que qq notions élémentaires de javascript et là, je cale un peu.

Le principe :
script javascript :
function afficherImage(aparent) {
var fond = document.getElementById('fond');
var chargement = document.getElementById('chargement');
var affichage = document.getElementById('affichage');
var image = document.getElementById('image');
//var hauteur, largeur;
var scrollH, scrollG;
// Recherche de la hauteur et la largeur totale de la page
largeur = document.body.scrollWidth;
hauteur = document.body.scrollHeight;
if (document.body.offsetHeight)
if (document.body.offsetHeight > hauteur) hauteur = document.body.offsetHeight;
// Affichage du fond
fond.style.top = 0;
fond.style.left = 0;
fond.style.height = hauteur;
fond.style.width = largeur;
// Taille de la fenêtre
if (window.innerHeight) {
largeur = window.innerWidth;
hauteur = window.innerHeight;
} else {
largeur = document.body.offsetWidth;
hauteur = document.body.offsetHeight;
}
// Position dans la page
if (window.pageYOffset) {
scrollH = window.pageYOffset;
scrollG = window.pageXOffset;
} else {
scrollH = document.body.scrollTop;
scrollG = document.body.scrollLeft;
}
// Affichage de l'animation pour le chargement
chargement.style.left = scrollH + (largeur - chargement.width) / 2
chargement.style.top = scrollG + (hauteur - chargement.height) / 2
chargement.style.display = 'block';
fond.style.display = 'block';
// chargement de l'image
img = new Image();
img.onload=function() {
var imgl = img.width;
var imgh = img.height;
if (imgl + 60 > largeur) {
imgl = largeur - 60;
imgh = img.height * imgl / img.width;
}
if (imgh + 60 > hauteur) {
imgh = hauteur - 60;
imgl = img.width * imgh / img.height;
}
affichage.style.top = scrollH + (hauteur - imgh - 120) / 2;
affichage.style.left = scrollG + (largeur - imgl - 20) / 2;
affichage.style.width = imgl + 20 + 'px';
affichage.style.height = imgh + 120 + 'px';
image.src= aparent.href;
image.width = imgl;
image.height = imgh;
affichage.style.display = 'block';
chargement.style.display = 'none';
return false;
}
img.src= aparent.href;

}

et dans la partie <body/>

<div id="fond">
<a href="#" onClick="cacherImage(); return false;"><img id="chargement" src="../img/chargement.gif" width="37" height="37" alt="Chargement..." /></a>
</div>
<div id="affichage">
<a href="#" onClick="cacherImage(); return false;"><img id="image" /></a>
<div id="commentaire">MON TEXTE LEGENDE</div>
</div>

L'appel à la fonction se fait à partir du lien de la vignette :
<a href="01.jpg" class="apercu" onClick="afficherImage(this); return false;">...<a/>


Ce que je comprends :
L'image 01.jpg est envoyée à la fonction afficherImage qui affecte à "image" cet image 01.jpg.
Dans la div, l'image s'affiche par le code <img id="image" />

Ce que je cherche à faire :
dans la fonction afficherImage, c'est attribuer à... (une variable?) un texte (par exemple "MON TEXTE LEGENDE") et que celui ci s'affiche dans la div : <div id="commentaire">MON TEXTE LEGENDE</div> (un peu comme ca se passe avec l'image)

L'objectif final est de rendre dynamique le texte avec du PHP...(mais ca c'est bon :-))

Si qq'un peut me mettre sur la voie ou me dire si ma démarche est bonne, ce serait tres sympa.
Merci
JF