jQuery - get contents of selected element (not html of its contents)

Question

Say I have the following html:

<div id="myDiv" title="My Div">This is me!</div>

I want to write a jquery statement such that the result is the entire line above as a string.

I almost want something like: var selectedHtml = $("#myDiv").self(); (I know that's not valid jquery) which results in selectedHtml having the value "<div id="myDiv" title="My Div">This is me!</div>"

Any ideas about which jquery function I'm looking for?

PS: getting the .html() of this node's .parent() will not work as it will give me siblings of the above node too.

Answer 1

I think might also be possible:

• wrap your div with another div (<div id="wrapdiv" />) --> wrap()
• get the html on the wrapdiv
• unwrap the wrapdiv (so do $("#myDiv").unwrap()) --> unwrap()

Here is a live example: http://jsbin.com/oniki/edit

edit:

Perhaps this is better because it doesn't use an id for the wrapperdiv and therefore less change for bugs with existing ids:

• wrap() your div with another (nameless) div
• get the html() of the parent() of your div
• unwrap() your div

See it in action: http://jsbin.com/oniki/3/edit

Answer 2

You can use plain javascript to do this.

var selectedHtml = document.getElementById ( "myDiv" ).outerHTML; //IE only

You can use this to get the outerHTML of a jquery element

jQuery.fn.outerHTML = function() {
    return $('<div>').append( this.eq(0).clone() ).html();
};

From

jQuery Snippets: outerHTML