JQuery returns html element instead of content

Question

I have something like this

<ul> <li class="aclass" id="a">content</li> <li class="aclass" id="b">content</li> <li class="aclass" id="c">content</li> <li class="aclass" id="d">content</li> <li class="aclass" id="e">content</li> <li class="aclass" id="f">content</li> </ul> 

I have code like

 $(".aclass").live("mousedown",function() { alert($this.html()); }); 

This will result in a warning about the contents, what I would like to do is to warn the entire element, e.g.

 <li class="aclass" id="f">content</li> 

I tried $ (this) .parent () but returns all UL

Answer 1

 alert($(this).clone().wrap('<div/>').parent().html()); 

Answer 2

 alert($('<div/>').append($(this).clone()).html()); 

http://jsfiddle.net/keegan3d/nfEyQ/

Answer 3

To get the DOM Node html code, you can use the outerHTML property

 var html = document.getElementById('someId').outerHTML; 

This, unfortunately, does not work in firefox. But you can use XMLSerializer to achieve the same result. Like this

 var elm = document.getElementById('someId'); var xmls = new XMLSerializer(); var html = xmls.serializeToString(elm); 

in your jQuery code, it might look something like this:

 $(".aclass").live("mousedown",function() { alert( this.outerHTML || new XMLSerializer().serializeToString(this) ); });