Ryan Ryan - 7 months ago 16
Javascript Question

Get selected element's outer HTML

I'm trying to get the HTML of a selected object with jQuery. I am aware of the

.html()
function; the issue is that I need the HTML including the selected object (a table row in this case, where
.html()
only returns the cells inside the row).

I've searched around and found a few very ‘hackish’ type methods of cloning an object, adding it to a newly created div, etc, etc, but this seems really dirty. Is there any better way, or does the new version of jQuery (1.4.2) offer any kind of
outerHtml
functionality?

Answer

2014 Edit : The question and this reply are from 2010. At the time, no better solution was widely available. Now, many of the other replies are better : Eric Hu's, or Re Capcha's for example.

This site seems to have a solution for you : jQuery: outerHTML | Yelotofu

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