My jQuery outerHTML plugin

outerhtml


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 stackoverflow.com, from where a lot of people are coming here, I have decided, to behave responsibly, and offer an (slightly) more optimized version.

/*
(c) DBJ.ORG, GPL Licence applies
Slightly better version of "my" outerHTL jQuery plugin. 
It is optimized to use outerHTML; if one is found.
*/
jQuery.fn.outerHTML = 
      /* is there a native outerHTML ? */
      !! document.body.outerHTML
      /* yes there is, so use it */
       ? function( ) {
          var r = "" ;
               this.each(function () { r += this.outerHTML ; }) ;
          return r;
      }
     /* no there is not, so we shall use jQuery */
     : function( ) { 
              return $("<div></div>").append( this.clone() ).html(); 
      }; 
/* 
(c) DBJ.ORG, GPL Licence applies 
*/

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

06-Aug-2012

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.

/*
  DBJ 2011-Aug-06 
  GPL licence applies
*/
jQuery.fn.outerHTML = function() {
         return $("<div></div>").append( this.clone() ).html(); 
}

Armed with above, if you do:

$('button').outerHTML()

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 :

 $('button').eq(0).outerHTML() ; // first element only

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:

// only first element gets selected
     $('button:first').outerHTML() ;
// only last element gets selected
     $('button:last').outerHTML() ;

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. :

/*
Display the outer HTML of the 3-rd button element selected.
*/
$('button').eq(2).outerHTML() ;
/*
or the css selector way
http://api.jquery.com/eq-selector/
*/
$('button:eq(2)').outerHTML() ;

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.