[RESOLU] Convertion de morceau XHTML en DOM

Bonjour,

Je cherche une fonction javascript qui transformerait une chaine contenant du XHTML en morceau d'arbre pouvant être en suite attaché au DOM.

Il y a l'astuce du :

element.innerHTML = element.innerHTML + "<li>blabla</li>";

Mais ça ne me satisfait pas, je trouve ça assez barbare et je suis plutôt surpris (ou incompétent) de ne pas trouver de fonction javascript qui le fasse.

La fonction est peut être trivial mais je ne trouve pas (par contre des modules java qui le font ça j'en ai trouvé !).

Merci de votre aide !
Modifié par VilCoyot (22 May 2007 - 15:22)

moi je connais Builder.node et append child mais je croi qu'il te faut aculous pour les utiliser, ya peut etre d'autre methode plus simple ^^

Bonjour,

Qu'est-ce que tu appelles "une fonction JavaScript" ?

innerHTML n'est pas spécifié par le W3C, mais c'est encore la façon la plus fiable de faire ce que tu veux. Tu pourrais théoriquement utiliser LsParser mais :
- C'est très mal supporté pour l'instant.
- C'est très lourd par rapport à ton besoin.

Par contre, tu peux te poser une autre question : as-tu vraiment besoin des fonctionnalités de innerHTML ? En général, il est beaucoup plus intéressant de passer par les méthodes de manipulation de l'arbre DOM (appendChild, createElement, ...), car ça te permet d'éviter les problèmes d'échappement des caractères spéciaux (X)HTML et ça évite souvent des différences entre les navigateurs dues au traitement des erreurs du code généré.

Si c'est bien de ce Builder.node dont tu parles, ça n'est pas tout à fait ce que je cherche. Je cherche une fonction qui prend en entrée une chaîne XHTML, par exemple : "<ul id='truc'><li>machin</li><li class='paire'>bidule</li></ul>" et retourne le noeud UL.

Je crois qu'il va falloir que je parse tout seul ma string et agisse en conséquence en me basant sur les méthodes :
appendChild(), setAttribute(), createElement() et createTextNode().

Vive le sport

Mon post précédent a été écrit avant que je ne vois ton post, Julien.

Oui oui innerHTML n'est pas propre et LSParser semble un peu trop lourd.

Ce que j'entendais pas fonction JavaScript c'est une fonction ou une méthode déjà écrite (en noyau ou en librairie). Mais je crois que je suis bon pour l'écrire comme un grand !

VilCoyot a écrit :
Si c'est bien de ce Builder.node dont tu parles, ça n'est pas tout à fait ce que je cherche. Je cherche une fonction qui prend en entrée une chaîne XHTML, par exemple : "<ul id='truc'><li>machin</li><li class='paire'>bidule</li></ul>" et retourne le noeud UL.

Je crois qu'il va falloir que je parse tout seul ma string et agisse en conséquence en me basant sur les méthodes :
appendChild(), setAttribute(), createElement() et createTextNode().

Vive le sport

function getDomNodeFromStr(str) {
   var node = document.createElement("div");
   node.innerHTML = str;
   return node;
}

c'est crade, mais ca te rendre le service que tu voulais

tu appelles la fonction du genre :

var node = getDomNodeFromStr("<li></li>");
var li = node.getElementsByTagName("li")[0];

J'utilise un DIV car c'est une node neutre et ca permet d'avoir plus de liberté après.
Evidement si tu veux prendre les enfants de ta node et les mettre dans un autre.
tu fais pas directement un appendChild de node
mais passe plutôt par une fonction qui fera un appendChild de tous ses childNodes.

function addChild(nodeCible, nodeSource) {
   for (var i=0; i<nodeSource.childNodes.length; i++) {
       nodeChild.appendChild(nodeSource.childNodes[i].cloneNode(true))
   }
}

[/i]
Modifié par Gatsu35 (22 May 2007 - 14:31)

VilCoyot a écrit :
Oui oui innerHTML n'est pas propre

innerHTML est propre dès lors qu'on s'en sert comme il faut... Ca peut fournir un bon code comme un autre invalide donc il faut savoir ce qu'on fait mais au dela de ça, ça s'avère bien souvent très pratique (particulièrement lorsqu'il faut créer plein d'éléments ou un avec de nombreux attributs, cette méthode étant beaucoup moins lourde et plus adaptée que les méthodes DOM)
Modifié par koala64 (22 May 2007 - 14:35)

Merci Gatsu35 c'est exactement ce que j'entendais par sale

koala64 a écrit :
nnerHTML est propre dès lors qu'on s'en sert comme il faut...

Exact. Par sale, j'entendais une utilisation comme le propose Gatsu35.

koala64 a écrit :
innerHTML est propre dès lors qu'on s'en sert comme il faut... Ca peut fournir un bon code comme un autre invalide donc il faut savoir ce qu'on fait mais au dela de ça, ça s'avère bien souvent très pratique (particulièrement lorsqu'il faut créer plein d'éléments ou un avec de nombreux attributs, cette méthode étant beaucoup moins lourde et plus adaptée que les méthodes DOM)

le innerHTML correspond directement à la restranction HTML de tes éléments depuis le DOM, et le code reste valide dans le sens où les navigateurs ont un cerveau et corrigent à peu près les erreurs que tu leurs balancerai à la gueule toi meme exemple simple :

div.innerHTML = "<p><div>toto</div></p>";
alert(div.innerHTML);
==><p></p><div>toto</div>

Gatsu35>

Afin de ne pas me soucier du traitement du retour de la fonction je l'écrirais comme ça :

function getDomNodeFromStr(str) {

   var node = document.createElement("div");

   node.innerHTML = str;

   return node.childNodes[0];

}

Mais c'est vraiment pour jouer les perfectionnistes sur un morceau de code un peu barbare !

Gatsu35 a écrit :
le code reste valide dans le sens où les navigateurs ont un cerveau et corrigent à peu près les erreurs que tu leurs balancerai à la gueule toi meme exemple simple

C'est bien ce que j'entendais par "traitement des erreurs du code généré". Contrairement à ce que tu sembles croire, les différents navigateurs ne réagissent pas vraiment de la même façon lorsqu'il doivent parser du code invalide. C'est d'ailleurs l'un des intérêts du fait de respecter les standards.
Modifié par Julien Royer (22 May 2007 - 14:49)

VilCoyot a écrit :
Gatsu35>

Afin de ne pas me soucier du traitement du retour de la fonction je l'écrirais comme ça :

function getDomNodeFromStr(str) {

   var node = document.createElement("div");

   node.innerHTML = str;

   return node.childNodes[0];

}

Mais c'est vraiment pour jouer les perfectionnistes sur un morceau de code un peu barbare !

Je serais toi j'eviterai car justement tu ne sais pas ce que tu vas mettre dans ta fonction :


si tu mets comme string :
"<li>dfdfdf</li><li>dfdfdf</li>"
la fonction te retournera que "<li>dfdfdf</li>" comme node
et mieux encore, si tu fais :
"blabla<li>dfdfdf</li>"
la fonction comme elle est là te retournera une node text avec comme nodeValue : "blabla"

Un petit exemple à tester dans différents navigateurs pour illustrer mes propos précédents :

alert(getDomNodeFromStr("<td>A</td>").innerHTML);

Gatsu35 a écrit :

si tu mets comme string :
"<li>dfdfdf</li><li>dfdfdf</li>"
la fonction te retournera que "<li>dfdfdf</li>" comme node
et mieux encore, si tu fais :
"blabla<li>dfdfdf</li>"
la fonction comme elle est là te retournera une node text avec comme nodeValue : "blabla"

Dans ce cas :

function getDomNodeFromStr(str) {
   var node = document.createElement("div");
   node.innerHTML = str;
   return node.childNodes;
}

Et comme j'utilise prototype :

function getDomNodeFromStr(str) {
   var node = document.createElement("div");
   node.innerHTML = str;
   return $A(node.childNodes);
}

Au passage, merci pour votre rapidité et la qualité de vos réponses !