In jQuery, are there any function that similar to html() or text() but return the whole content of matched component?

Question

For example, if the match is <div class="class1">Hello world</div>, I need to return

<div class="class1">Hello world</div>

not just "Hello world".

Thanks!

Answer 1

There's no built-in function for getting the outerHTML, but you can use this:

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

Then in your selector:
$('.class1').outerHTML() will give you what you are looking for.

Source of function

Answer 2

@Jose Basilio's answer is great. But Brian Grinstead found a problem in this function when using IFrames: http://www.briangrinstead.com/blog/jquery-outerhtml-snippet

Here I put together Jose's way for also setting the outerHTML with Brian's solution for IFrames:

jQuery.fn.outerHTML = function(s) {
    if (s) {
        return this.before(s).remove();
    } else {
        var doc = this[0] ? this[0].ownerDocument : document;
        return jQuery('<div>', doc).append(this.eq(0).clone()).html();
    }
}

Answer 3

Check out this outerHTML plugin.

Answer 4

I used .andSelf() with success:

http://api.jquery.com/andSelf/