skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mercredi 18 mai 2011

Récupérer le code HTML d'un élément, incluant lui-même avec jQuery

Publié par Infinite Loop, à 12 h 44 2 commentaires

Si vous avez l'habitude d'utiliser jQuery pour manipuler le DOM de vos pages web, vous savez que la méthode html() retourne le contenu à l'intérieur de la balise demandée par le sélecteur.

Par exemple, avec le code HTML suivant :

<ul id="list">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li><a href="http://code18.blogspot.com">Code 18</a></li>
</ul>
Et un appel à la fonction html() de jQuery :
var html = $j('#list').html();
alert(html);
L'alerte affichera ceci (remarquez l'absence du <ul>/</ul>) :



Comment faire pour inclure la balise parent dans la source HTML retournée par le sélecteur ? C'est le truc que je vais vous donner aujourd'hui. Pour y arriver, il suffirait d'envelopper la liste en l'imbriquant dans un conteneur quelconque, uniquement pour faciliter sa récupération. Mais ce que je préfère, c'est de garder la source propre et de le faire dynamiquement en JavaScript, au moment où j'en ai besoin.

La ligne magique est celle-ci :
var html = $j('#list').wrap('<span/>').parent().html();
alert(html);


Le problème, c'est qu'en ajoutant un élément parent à celui à extraire, on modifie le DOM original.


C'est pourquoi il vaut mieux le retirer immédiatement après la manipulation pour garder la source propre.
$j('#list').unwrap();
N.B. Maxime Thirouin (@MoOx) m'a fait remarquer que $j('<span/>').append($j('#list').clone()).html(); devrait aussi fonctionner. Après test, je confirme.


Tags: JavaScript

2 réponses à "Récupérer le code HTML d'un élément, incluant lui-même avec jQuery"

  1. syndrael a dit...
    19 mai 2011 à 03 h 03

    Très utile la dernière commande.. avec l'avantage du clone().
    Par contre le système pour déposer des commentaires en quittant la page c'est un peu moyen..
    S.

    Infinite Loop a dit...
    19 mai 2011 à 06 h 40

    C'est celui de la plateforme Blogger. En espérant qu'ils pourront l'améliorer...


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ▼  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ▼  mai 2011 (15)
        • Plougastel, la récompense de fin de journée
        • Les eaux sinueuses apportent l'argent
        • Citation no. 123 sur la science
        • Anecdote de guitare - Gibson Les Paul de Peter Green
        • Pendant que vous serez dans le trafic...
        • Citation no. 122 sur le paradoxe d'affection
        • Moi aussi, j'ai survécu à la fin du monde
        • Récupérer le code HTML d'un élément, incluant lui-...
        • Protégé par Chuck Norris
        • J'ai volé 100$ à Facebook en fermant mon compte
        • Maison du gosseux de Saint-Ulric
        • Le web au gouverment du Québec, circa 2002
        • Une artiste multitâche jouant 3 instruments
        • Citation no. 121 sur les mamans
        • L'orchestre du jeu vidéo (traduction mot à mot)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft