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

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.