The Web Architects’ Blog

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);