My jQuery outerHTML plugin


No, if, no else Javascript? Look here.

Update 10-OCT-2017: This little plugin is consistently on the top of most viewed ones on this site.  Let’s see why.

There are several outerHTML plugins for jQuery around. But I could not find any that works “in the spirit of jQuery”.

Side note: Have you seen this plugin ? It gives you list of events attached.  Check it out later.

Update 13-NOV-2015

After reading recently the 2 year old post on, from where a lot of people are coming here, I have decided, to behave responsibly, and offer an (slightly) more optimized version.

Is this an optimization or obfuscation? To actually prove if this is better version performance wise, I should test it.


So, here is my humble contribution. It works from jQ 1.3.2 onwards, AND displays outerHTML of the whole current result set of jQuery, by default.

Armed with above, if you do:

You will get concatenated outer HTML of all the buttons on the current page. Which I think is what one would expect from jQuery. Although surprisingly so, the jQuery html() method does output the inner HTML of only the first element selected. While text() method does output the inner text of all the elements selected.

I have to admit, I have not checked recently if this behavior has changed. Maybe some consistency has improved things here? Or there is some higher logic which might prove me wrong. Right now if one does not wish this concatenation of all outer html’s from the selection set, one can emulate it by using my plugin and by doing this :

That was a solution by using jQuery “stack”. Which might be empty after a selection. So it is better and more resilient to do it by selecting:

One will display the outer HTML of only the first element, only the first as selected, or only the last as selected. Or one can point to any exact element from the selection set, as denoted by its index. E.g. :

This is exactly what I want: to control with a selector what I want to select and then to have a plugin which works on the whole of the resulting selection. Where selection was optionally dynamically narrowed with the use of jQuery.

No hidden surprises here.

This post was originally published 2009 Apr 16

2 thoughts on “My jQuery outerHTML plugin”

Comments are closed.