Cross-browser outerHTML with jQuery

jQuery doesn't come with a built-in outerHTML attribute or function, but includes a "html()" function that lets you create your own, cross-browser outerHTML. Calling html() returns an element's "innerHTML", or HTML code, as a string. For this tutorial, we'll use this <button> element: <button onclick="alert('Hello!')" id="btn"> Click me </button>
Note: if you're not interested in the process :-| , go straight to the code ↓ you can copy-paste.
Let's see what the html() function gives us, when called on the button itself: alert( $("#btn").html() ); // Click to run -> If the button were the single child and only content of another element, calling html() would give us our button's outerHTML, not just its innerHTML (which in this case is just the button's text).
The simplest solution is to use the wrap() function to surround your element with a temporary element, like a <div> - the downside is that you end up creating as many wrapper div's in your DOM as the number of times you call your custom outerHTML function. alert( $("#btn").wrap("<div>").parent().html() ); // Try it ->
The jQuery "clone()" function creates an exact copy of an element matched by a selector, but creates it only in memory unless you explicitly added to your document: $("#btn").clone(); // copy of our button created in memory
Here's the final code: declare it after including the jQuery script file or inside the document ready function. To understand how the snippet works, click for a step-by-step explanation. • Take the first matched element with this.eq(0).
• Create a copy of it (in memory) with the clone() function.
• Append that clone to a temporary <div> (in memory), created with the "$('<div>')" selector and a call to the append() function (adds our clone inside the temporary div).
• Extract the innerHTML of that div (which contains the button clone) using html().
• Return the result (as a string).$.fn.outerHTML=function(){return $('<div>').append(this.eq(0).clone()).html()}

Email AOL Mail Gmail Hotmail Yahoo Mail MS Office Excel 2010 OneNote 2010 Outlook 2010 Word 2010 OS & Devices Kindle Fire Windows 7 Web Dev C# and .NET JavaScript jQuery