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.

[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.

[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+