Discussion :

[Bisûnûrs]

Hello,

J'aimerais savoir s'il existe un moyen simple d'interpréter du texte comme du HTML avec les fonctions DOM.

Pour illustrer mes propos :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var div = document.createElement( 'div' );
 
var texte = '<i>mon texte</i>';
 
div.appendChild( document.createTextNode( texte ) );

Evidemment, ce code ne fonctionne pas, il m'affiche "<i>mon texte</i>". Or, j'aimerais pouvoir afficher "mon texte".

Sachant que la variable texte est remplie par les données d'un XML, et que je peux très bien recevoir du texte simple, sans balise.

Avez-vous une idée ?

[bigboomshakala]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var div = document.createElement( 'div' );
var italique = document.createElement('i');
var texte = document.createTextNode("mon texte");
 
italique.appendChild(texte);
div.appendChild(italique);

cela dit les balise comme <i>, <center>, <font> etc... sont déconseillés. aujourd'hui on privilégie les classes CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var div = document.createElement( 'div' );
var texte = document.createTextNode("mon texte");
div.appendChild(texte);
div.className = "italique"; // .italique { font-style: italic; }

[SpaceFrog]

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var texte = document.createTextNode("mon texte");
texte.style.fontStyle='italic'

sinon en passant par data ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var texte = document.createTextNode("");
texte.data="<i>mon texte</i>"

testé ... ni l'un ni l'autre ne passent :oops;

[Bovino]

Ben Spaffy, tu es fatigué...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var div = document.createElement( 'div' );
div.style.fontStyle = 'italic';
var texte = 'mon texte';
div.appendChild( document.createTextNode( texte ) );

[Bezout]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.createElement("<i style="...">texte</i>")

Ca marche pas ?

[Bovino]

@Bezout :
Non, c'est pas cross-browser.

[Bezout]

Ah oui possible, sous IE ca devait marcher

[Bisûnûrs]

Je crois que vous avez tous zappé cette partie de l'énoncé :

Sachant que la variable texte est remplie par les données d'un XML, et que je peux très bien recevoir du texte simple, sans balise.

Mais je vais tenter la proposition de Spafy avec le data.


Edit : Sans succès, le résultat est le même.

[Bovino]

Et le "sans innerHTML", il y a une raison particulière ?

[Bisûnûrs]

Parce que l'élément en question n'existe pas encore dans la page. Il me semble que dans ce cas-là, le innerHTML génère une erreur non ?

[Bovino]

Non :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var madiv = document.createElement('div');
var texte = "<i>Du texte</i>";
madiv.innerHTML = texte;
document.body.appendChild(madiv);

Teste ça et tu verras le texte apparaitre tout en bas de la page.

[Bisûnûrs]

Effectivement ... Bon, au temps pour moi, je vais utiliser le innerHTML.

Merci à tous.

[E.Bzz]

Salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var madiv = document.createElement('div');
madiv.id = 'id_div';
document.body.appendChild(madiv);
var texte = "<i>Du texte</i>";
document.getElementById('id_div').innerHTML = texte;

Non ?

EDIT : oups, un peu tard

A+

[bigboomshakala]

tu peux m'expliquer le soucis avec ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var div = document.createElement( 'div' );
var texte = document.createTextNode("mon texte");
div.appendChild(texte);
div.className = "italique"; // .italique { font-style: italic; }

meme si "mon texte" est remonté par le xml, ça change rien

[Bisûnûrs]

@bigboomshakala : Ce que je reçois du XML, ce n'est pas que "mon texte", c'est "<i>mon texte</i>", avec la balise <i>. Et je ne peux pas mettre une classe entière sur le texte que je reçois, parce qu'il peut y avoir du texte en dehors des balises, d'autres balises, etc.

[bigboomshakala]

là j'ai compris

[SpaceFrog]

parser le xml avec une regExp pour virer les balises ??

[Bisûnûrs]

Non plus, parce que je veux quand même garder la mise en forme proposée par ces balises.

[RomainVALERI]

Sans savoir si ton contexte de projet particulier le permet, j'aurais quand même envie de te proposer une autre possibilité, non encore évoquée : avec la bibliothèque Prototype, la méthode Element.update(chaine) résoud ce problème et tous ceux qui peuvent être associés à l'utilisation d'innerHTML, est totalement cross-browser, et enfin (au cas où ça te soit utile mais je l'ignore ^^) les scripts éventuellement présents dans le fragment html à insérer (entre balises script bien sûr) seront exécutés juste après l'insertion, avec juste le petit décalage de 10ms suffisant pour que l'élément soit bien pris en compte dans le DOM.

Bref... à envisager peut-être si jamais les autres qualités de ce framework te séduisent déjà ^^

[Bisûnûrs]

@RomainVALERI : J'avoue que là, ça serait écraser la mouche avec un bazooka. ^^

Mais comme mon application va commencer à regorger d'AJAX, je pense qu'il va falloir que je me tourne vers les librairies qui gèrent ça, plutôt que d'essayer de réinventer la poudre.

A voir.