Comment obtenir la chaîne html d'une balise enfant et d'une balise parent en utilisant jquery?

Question

Par exemple, si je HTML ul liste comme

<ul id="ulIdentificator"> 
    <li id="li0"></li> 
    <li id="li1"></li> 
    <li id="li2"><label id="label1"></label></li> 
</ul> 

Si j'utilise jQuery comme ce

var htmlStr = $("#li2").html(); 

Le résultat sera que la chaîne qui contient balise label <LABEL id="label1"></LABEL></li> je dois obtenir la chaîne Html qui contient ce <LI id="li2"><LABEL id="label1"></LABEL></LI>

Answer 1

Les mentions second OuterHTML technique Andres (du blog des architectes Web) fonctionnent sur tous les navigateurs, c'est donc probablement un meilleur choix. L'idée de base est que vous pouvez obtenir HTML externe d'un élément en le rendant innerHTML d'un autre élément:

var outerHtml = $("<div/>").append($("#li2").clone()).html(); 

Il y a seulement un peu un peu délicat - assurez-vous de clone votre élément d'origine, de sorte que vous ne retirez pas de la DOM.

Si vous le faites souvent ou que vous voulez le faire pour des tableaux d'éléments, il vaut probablement la peine de suivre l'exemple lié et de faire un petit plugin pour cela.

Answer 2

jQuery OuterHTML, OuterHTML II

Answer 3

Vous pouvez également écrire un petit plugin jQuery avec la méthode proposée de Jeff sternale:

// jQuery plugin 'htmlWithParent' 

jQuery(function($) { 

    $.fn.htmlWithParent = function() { return $j("<div/>").append($j(this).clone()).html(); }; 

});

et utiliser ce petit plugin cutom, par exemple:

var htmlCode = $("<p><span>Helo world!</span></p>"); 

// Return only child nodes: <span>Helo world!</span> 
var output1 = $(htmlCode).html(); 

// Return whole HTML code (childs + parent): <p><span>Helo world!</span></p> 
var output2 = $(htmlCode).htmlWithParent();

méthode très utile. ;)