[POO] Span, nodeValue et sauts de ligne.

Version imprimable

Bonsoir,

Mon code javascript génère un DIV, masquée à l'utilisateur, comme suit:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
  DVObject.prototype.writeHtmlCode = function() {
    //the DV-Object consists of two inner divs
    // # content-div
    // # close-div
 
    //build the html code
    dv.htmlCode = '<div id="parentDV" onClick="dv.hideDV();">\n' +
                    '<div class="img_popup" id="childDVCont" >' +
                          '<img src="" width="10" height="10" border="0" alt="" title="" name="picDV">' +
                          '<span id="spanContent">lol <br /> huhu</span>' +
                    '</div>' +
                    '\n' +
                    '<div id="childDVLoad">'+loadingSign+'</div>' +
                    '<div id="childDVClose" onClick="dv.hideDV();" title="Fermer">'+closingSign+'</div>' +
                    '<div id="childDVBeforeAndNext">' +
                    ' <table id="childDVTblBeforeAndNext" cellspacing="0" cellpadding="0">' +
                    '  <tr>' +
                    '   <td><div id="childDVBefore" onClick="dv.showLastImage();" title="Vorheriges Bild"><b>'+beforeSign+'</b></div></td>' +
                    '   <td><div id="childDVNext" onClick="dv.showNextImage();" title="Nächstes Bild"><b>'+nextSign+'</b></div></td>' +
                    '  </tr>' +
                    ' </table>' +
                    '</div>' +
                  '</div>';
    //write the code to the document
    window.document.writeln(dv.htmlCode);
  };

Jusque là, tout va bien :)
Toutefois, cette DIV est parfois affichée et son contenu varie à chaque affichage. En pratique c'est ce code là qui nous intéresse plus particulièrement :

Code:

1
2
3
4
5
6
7
 
[...]
                    '<div class="img_popup" id="childDVCont" >' +
                          '<img src="" width="10" height="10" border="0" alt="" title="" name="picDV">' +
                          '<span id="spanContent">lol <br /> huhu</span>' +
                    '</div>' +
[...]

Je souhaite modifier le contenu du SPAN.
Pour se faire, j'utilise le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
 
        //Ecriture du commentaire dans le span de la DIV
        if (document.getElementById("spanContent").firstChild == null) 
        {
           document.getElementById("spanContent").appendChild(document.createTextNode(get_alt_from_imgString(imgString)));
        }
        else 
        {
           document.getElementById("spanContent").firstChild.nodeValue = get_alt_from_imgString(imgString);
        }

Le commentaire est correctement écrit dans mon SPAN.
Ce qui pose un soucis, c'est que mes sauts de ligne ne sont plus pris en compte par les navigateurs et sont "lisibles". Au lieu d'aller à la ligne dans le texte, l'utilisateur peut lire des " " dans mon texte.

Tant que je n'ai pas modifié le contenu du SPAN, le texte initial est affiché : "lol huhu"... Mais le point intéressant c'est que ce texte là est correctement interprété et le saut de ligne a bien lieu !

Pourriez-vous me venir en aide, s'il vous plait ?

20/02/2008, 08h12
javatwister

disons déjà que ta propriété htmlcode est aberrante: pourquoi places-tu une telle portion de code html, en dur, dans un objet javascript?

ensuite, en demandant createTextNode() sur le span, c'est évident que plus aucune balise ne sera interprétée; d'ailleurs, span est une balise inline;

Bonjour et merci pour votre réponse.

A vrai dire ce script n'est pas de moi. Son objectif est d'afficher/masquer une DIV de façon dynamique. Cette DIV affiche une image passée en paramètre et ses propriétés HTML sont modifiées pour ajuster le fond, la forme et les dimensions en fonction de l'image et de la résolution du navigateur.

Donc ce htmlCode génère le code de base de la DIV, puis le modifie à chaque affichage de la DIV. Ainsi l'utilisateur du script n'a pas besoin de se soucier de la structure DIV qu'il devra mettre en place pour utiliser le script.

Moi, tout ce que j'ai ajouté c'est :
Code:

1 2 'lol huhu' +
Ainsi que la classe CSS "img_popup", qui me permet de masquer le contenu du SPAN, et de l'afficher lors du passage de la souris sur la DIV.

Citation:

en demandant createTextNode() sur le span, c'est évident que plus aucune balise ne sera interprétée; d'ailleurs, span est une balise inline;

Cette remarque m'intéresse beaucoup, toutefois j'avoue m'y connaitre bien peu en Javascript. Il m'a été recommandé d'utiliser un createTextNode() pour ajouter un contenu dans un SPAN. Mais, dès lors, pourquoi plus aucune balise ne sera interprétée ? Existe-t-il une solution pour éditer le contenu d'un SPAN tout en conservant l'interprétation des balises ?

Remarque après essai :
Si maintenant je n'utilise plus createTextNode() puisque j'ai initialisé le texte de mon span :
Code:

1 2 3 4 5 6 7 8 9 10 //Ecriture du commentaire dans le span de la DIV //if (document.getElementById("spanContent").firstChild == null) //{ // document.getElementById("spanContent").appendChild(document.createTextNode(get_alt_from_imgString(imgString))); //} //else //{ document.getElementById("spanContent").firstChild.nodeValue = get_alt_from_imgString(imgString); //}
Alors le résultat demeure inchangé : le contenu du SPAN est bien mis à jour, mais les balise sne sont toujours pas interprétées.

Merci pour ces conseils avisés :)

20/02/2008, 16h43
SpaceFrog

innerHTML ?
20/02/2008, 16h46
Nyphel

Avec "innerHTML" cela fonctionne bien 8O...

Pourtant j'ai souvenir que j'utilisais cette solution initialement et que cela faisait parfois planter le navigateur. Quelques recherches succintes m'avaient laissé entendre que le innerHTML ne devait pas être utilisé pour les SPAN.

Merci :)
20/02/2008, 17h00
SpaceFrog

utilise des divs ?
20/02/2008, 17h27
Nyphel

D'accord, merci !