Get Raw HTML of Node in JQuery

Question

I have used $("#parent").html() to get the inner html of #parent, but how do I get the html of the parent itself?

The use case is, I grab an input node like this:

var field = $('input');

I would like to be able to get the raw html of that node (<input type='text'>) with something like field.html(), but that returns empty. Is this possible?

Answer 1

Or you could create add an JQuery function like this:

jQuery.fn.outerHTML = function(s) {
  return (s)
  ? this.before(s).remove()
  : jQuery("<p>").append(this.eq(0).clone()).html();
}

so you could do this:

$('input').outerHTML();

or

$('input').outerHTML("new html");

thanks to http://yelotofu.com/2008/08/jquery-outerhtml/