jQuery : Getting a selected element's outer HTML

jquery-outer-html

The .html() function of jQuery only lets you get the inner html of a selector, but sometimes you want the selected object as well, here is a quick jQuery snippet to get the complete html of a selector.

There are two major methods used to get an objects outerHTML, we’ll be discussing both.

Getting wrapper html using the outerHTML method

var outer_html = $('selector')[0].outerHTML ;
console.log(outer_html);

The only problem with this method is that, it wasn’t widely supported by all browsers until early 2011. That means, if you are targeting older browsers for some reason, this method may not be the optimum choice. Firefox was the last browser to add support for outerHTML method, while IE has supported this since IE4.

Getting outerHTML using the jQuery clone method

This methods works by cloning an object in the memory, then wrapping a p tag around it, and then using the built in .html() function to get the inner html of the p tag, this works fine, but if you are dealing with a large set of data, cloning each object in the memory may not be ideal.

outer_html = $('selector').clone().wrap('<p>').parent().html();

If you are using the above method to target multiple items, make sure to use a .each() function to get the outer html of individual items.

  • Alan

    Thank you! This was very helpful. 🙂

  • Dinh Hoang Hiep

    That’s so great…. Thank you.

  • rubyconvict

    Perfect!