[DOM] Interpréter du HTML sans innerHTML

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:

---

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 ?

:merci:

Code:

---

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:

---

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; }

---

ou

Code:

---

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

---

sinon en passant par data ?

Code:

---

1 2 3

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

---

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

Ben Spaffy, tu es fatigué...

Code:

---

1 2 3 4

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

---

Code:

---

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

---

Ca marche pas ?

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

Ah oui possible, sous IE ca devait marcher :aie:

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

Citation:

---

Envoyé par Bisûnûrs

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.

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

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 ?

Non :

Code:

---

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.

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

Merci à tous. :)

Salut :D

Code:

---

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 :aie:

A+

:koi: tu peux m'expliquer le soucis avec ça ?

Code:

---

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

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

:king: là j'ai compris

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

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

:oops:

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à ^^

@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. :)

Citation:

---

Envoyé par Bisûnûrs

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. :)

---

Justement... ^^ d'où le sens de ma suggestion :

Citation:

---

Envoyé par RomainValeri

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

---

Et en l'occurrence, Prototype est particulièrement bien armé côté Ajax... surtout pour la portabilité du code !

Je garde ta solution en réserve, il se peut que je sois amené à l'étudier plus amplement dans les jours qui viennent (voir si Prototype est en mesure de répondre à tous mes besoins, voir l'utilisation des fonctions de cette librairie, etc).

Merci en tout cas pour tes réponses !

Quand je vous dit regExp ... faut me croire ^^

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script type="text/javascript"> function parseXML(texte){ regtag=/(<(.)[^>]*>)(.*)<\//; texte.match(regtag) tag=RegExp.$1 texte=RegExp.$3 var tagstyle=document.createElement(tag); var tagtext=document.createTextNode(texte); tagstyle.appendChild(tagtext); document.body.appendChild(tagstyle) }   </script>   </head>   <body onload="parseXML('<i>lkjlkjlkj</i>')">   </body>

---

pour le moment ne gère qu'une balise de mise en forme.
mais pourrait facilement en gérer plusieurs non imbriquées ...


voire

Code:

---

(<(.*)\b.*[^>]>)(.*)</

---

si la balise de mise en forme possède des attributs

m'enfin l'idée est quand même, pour finaliser, de convertir les tags obsolètes en conteneurs génériques (span, pourquoi pas);

Reste à définir ce qu'est un tag obsolète, les balises <i>, <b> et d'autres sont tout à fait conformes aux normes w3c, sont sémantiquement correctes et pas forcément plus pesantes que des <span class="italique">... enfin selon moi :mrgreen:

oui elles sont w3c correctes ...

moi on me dit de passer un string

Citation:

---

<i>italique</i>

---

dans le flux de la page sans utiliser innerHTML, alors je passe la string dans le flux sans passer par innerHTML

Désolé Spaffy, ce n'était pas pour toi... Je répondais juste à javatwister (et plus généralement à un avis qui semble répandu) concernant certaines balises considérées à tort comme obsolètes. ;)

d'accord, "obsolètes" est un abus de langage mais on est pas mal à être d'accord sur ce point, non? les balises de mise en forme sont très nettement remplaçables par css, ce qui simplifie largement la structure du document (mais là, je parle pour rien, je sais!)

Mais non mon ptit JT ...
Allez pas nous le froisser ... déja qu'il ne vient plus beaucoup !

On t'aime tu sais ;)



sinon la regExp à utiliser serait plutot :

Code:

---

<(.*[^>]).*>[^>].[^<]*<\/\1>

---