[Javascript] Création, mise à jour, etc d'un noeud DOM

[Ter Rowan]

J'espère que je vais être à peu près clair ^^

Je développe avec Ajax, et, de fait, je me retrouve à devoir faire souvent des mises à jour du DOM.

ces mises à jour concernent le plus souvent un élément d'une liste avec image :

Code PHP :

<?php 

<ul id="cible">

<li id='idAManipuler><a href=...><img src=..../></a></li>

...

...

</ul> 

[Sephi-Chan]

À toi de voir si tu veux faire ça proprement ou non.


Sephi-Chan

[Ter Rowan]

bah la question est aussi ... est ce que c'est si crade que ça le innerhtml...

[Sephi-Chan]

Je te redirige vers quelques billets :

• Julien Lecompte's Blog - The Problem With innerHTML
  
• Javascript Kata - Do not use the innerHTML property on HTML objects
  
• Wait till I come ! - innerHTML vs. DOM = pot noodles vs. real cooking
  
• Best Coding Practices - Break your innerHTML addiction
  
• DomScripting - The innerHTML dilemma
  

Personnellement, je suis pour l'injection propre du DOM : innerHTML fonctionne bien mais ce n'est pas fait dans les règles de l'art.


Sephi-Chan

[Hakushi]

De toute facon, il est certain que de l'injection DOM sera bien plus propre qu'un innerHTML.

Dans les faits, je suis un grand pretre venerateur de JQuery , et je conseille toujours de jeter un coup d'oeil a JQuery, c'est 50kb (20kb gzip) de pur bonheur :

Code :

$('#mon_div').add('img');
$('#mon_div img').attr({
          src: "/images/lol.gif",
          title: "LoL",
          alt: "Image drole"
        });

http://docs.jquery.com/Tutorials


Par exemple.

[Ter Rowan]

bah perso j'utilise prototype, et il a aussi une méthode "add"

sur le papier c'est bien propre mais en réalité, en rentrant dans la librairie j'ai vu qu'il manipulait le innerHTML ^^

du coup, j'ai fait un mix :

mon côté serveur envoie du xml bien propre (avec des balises à moi)
mon côté client interprète le code dans une fonction générique, en fait (bouh pas beau) un morceau html et l'envoie à prototype

ainsi, si jamais un jour, je veux faire plus propre, je n'aurais qu'à modifier une seule fonction

[Sephi-Chan]

Pourquoi ne pas envoyer du JSON plutôt que du XML ? Ça t'évite de l'interpréter puisque tu peux l'utiliser directement avec Javascript.

Effectivement jQuery utilise innerHTML. D'ailleurs, la majorité de leurs commentaires soulignent un problème avec IE quand il parlent de innerHTML. :p

Je pense toutefois que DOM va bientôt complètement remplacer innerHTML puisqu'il est de mieux en mieux supportés d'après ce que je lis sur le sujet. Les lenteurs de DOM semblent provenir du fait qu'une page n'est pas lue comme un document XML à part entière (à moins d'utiliser XHTML 1.1, qui est parfois mal supporté).


Sephi-Chan

[Ter Rowan]

Pourquoi ne pas envoyer du JSON plutôt que du XML ? Ça t'évite de l'interpréter puisque tu peux l'utiliser directement avec Javascript.

j'ai commencé en XML avant de découvrir l'existence de JSON ^^ et j'ai une fonction générique qui traite l'ensemble des interactions Ajax de modification de ma page web.

Du coup ça ferait beaucoup de boulot pour pas grand chose. En effet, j'ai besoin de peu de lignes de code pour l'interprétation que je fais de mon XML

et puis sait on jamais mon retour xml pourrait très bien être utilisé à terme sur autre chose que du javascript

[Sephi-Chan]

L'autre chose proposera sans-doute un parser JSON.
Okay pour l'utilisation de XML, ce n'était que pour te proposer une alternative.



Sephi-Chan

[Wells]

Voici une débat trés intéréssant. cependant j'avoue nager un peu et j'imerais avant toute remarque etre sur de bien comprendre de quoi il s'agit.

J'aimerais donc si possible qu'on me donne l'équivalent de ceci en DOM:

Code PHP :

<?php 

XXX.innerHTML='<div class="content">

    <div class="page">

                <ul class="menu1">

            <li><a href="../" rel="nofollow">Accueil</a></li>



            <li><a href="../news.php">News</a></li>

            <li><a href="../decouvrir.php">Découvrir le jeu</a></li>

            <li><a href="../REGLES">Regles / faq</a></li>

            <li><a href="../REGISTRE/nations-actives.html">Registre</a></li>

            <li><a href="../INSCRIPTION">Inscription</a></li>

            <li><a href="../TELECHARGEMENT">Téléchargements</a></li>



            <li><a href="../partenaires.php">Partenaires</a></li>

        </ul>

        <ul class="menu2">

            <li><a href="../HISTOIRE">Histoire simplifiée</a></li>

            <li><a href="../RACES">Races</a></li>

            <li><a href="../WIKI/Accueil.html">Bibliotheque</a></li>

            <li><a href="../GAZETTE/GG/Edito.html">Gazette</a></li>



            <li><a href="http://asso.septentrion-game.com/">Association</a></li>

            <li><a href="http://igs.septentrion-game.com/">Statistiques</a></li>

            <li><a href="http://forum.septentrion-game.com/">Forum</a></li>

        </ul>        <div class="contenu">

            <ul class="bloc_tv">

                <li><a href="PROFIL/"><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/profil.png&amp;texte=Profil" alt="Profil" title="Profil" /></a></li>

                <li><a href="http://ordre.septentrion-game.com/"><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/ordres.png&amp;texte=Vos ordres" alt="Vos ordres" title="Vos ordres" /></a></li>



                <li><a href="MESSAGERIE/"><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/message.png&amp;texte=Vos messages" alt="Vos messages" title="Vos messages" /></a></li>

                <li><a href="RACE/"><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/race_0.png&amp;texte=Votre race" alt="Votre race" title="Votre race" /></a></li>

                <li><a href="RAPPORT/"><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/rapport.png&amp;texte=Votre rapport" alt="Votre rapport" title="Votre rapport" id="dec0" /></a></li>

                <li><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/vide.png&amp;texte=" alt="" title="" id="dec1" /></li>

            </ul>

</div></div>';