Today I’ve been working on some template stuff using jquery and I realized I need a way to get the entire html string for a particular selector, not just the innerHtml contents. Hmm, that sounds like something called outerHtml…
Okay, better google for outerHtml: yes… no… grrrrr… there is an outerHtml property, but only for IE. So lets see if we can roll our own cross-browser solution using jquery:
jQuery.fn.extend( {
outerHtml: function( replacement )
{
// We just want to replace the entire node and contents with
// some new html value
if (replacement)
{
return this.each(function (){ $(this).replaceWith(replacement); });
}
/*
* Now, clone the node, we want a duplicate so we don't remove
* the contents from the DOM. Then append the cloned node to
* an anonymous div.
* Once you have the anonymous div, you can get the innerHtml,
* which includes the original tag.
*/
var tmp_node = $("<div></div>").append( $(this).clone() );
var markup = tmp_node.html();
// Don't forget to clean up or we will leak memory.
tmp_node.remove();
return markup;
}
});
So that basically gets us an outerHtml() function! The method also lets you do outerHtml replacements, which is basically just a wrapper around replaceWith(). Pretty fun!
So now, how do we use it?
<div class="outer" >Fun Stuff</div>
// get the entire html for the <div class="outer" > tag
var x = $('.outer').outerHtml();
// replace all div tags with <div class="outer" >Fun Stuff</div>
$('div').outerHtml(x);
