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

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

Answer 2

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 3

Found this - very complete, but I'm not sure if it's overkill...

jQuery.fn.extend( {
outerHtml: function( replacement )
{
 // We just want to replace the entire node and contents with
 // some new html value
 if (replacement)
 {
  return this.each(function (){ $(this).replaceWith(replacement); });
 }

 /*
  * Now, clone the node, we want a duplicate so we don't remove
  * the contents from the DOM. Then append the cloned node to
  * an anonymous div.
  * Once you have the anonymous div, you can get the innerHtml,
  * which includes the original tag.
  */
 var tmp_node = $("<div></div>").append( $(this).clone() );
 var markup = tmp_node.html();

 // Don't forget to clean up or we will leak memory.
 tmp_node.remove();
  return markup;
 }
});

http://ivorycity.com/blog/2009/08/18/3/