jQuery: emulare outerHTML

La proprietà non standard outerHTML, attualmente supportata da Internet Explorer, Safari e Chrome, restituisce i contenuti HTML di un elemento e l'elemento stesso che li contiene. Possiamo emulare questa proprietà usando jQuery. Vediamo come.

Abbiamo questa struttura HTML:

<div id="test">
	<p>...</p>
</div>

Ecco la nostra implementazione in jQuery:

(function($) {

	$.fn.outerHTML = function(){

    return (!this.length) ? this : (this[0].outerHTML || (
      function(el){
          var div = document.createElement('div');
          div.appendChild(el.cloneNode(true));
          var contents = div.innerHTML;
          div = null;
          return contents;
    })(this[0]));

	}



})(jQuery);

Esempio d'uso:

var outer = $('#test').outerHTML();
console.log(outer); // <div id="test"><p>...</p></div>