How to get html string of a child tag and parent tag using jquery?

Question

For example if I have HTML ul list like

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

If I use jQuery like this

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

The result will be only string that contains label tag <LABEL id="label1"></LABEL></li> I need to get Html string that contains this <LI id="li2"><LABEL id="label1"></LABEL></LI>

Answer 1

jQuery OuterHTML , OuterHTML II

Answer 2

The second OuterHTML technique Andres mentions (from the Web Architects' Blog) works on all browsers, so it's probably a better choice. The basic idea is that you can get an element's outer HTML by making it another element's innerHTML:

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

There's only one slightly tricky bit - make sure to clone your original element, so you don't remove it from the DOM.

If you do this often or want to do this to arrays of elements, it's probably worth following the linked example and make a little plugin to do this.