POC: jQuery.outerHtml

Adds a jQuery object call to get outer HTML on an element. Uses the native method when it is available.

by Adam Patridge

HTML

<p>Click a list item to get its outer HTML</p>
<ul class="links secondary">
    <li><a href="/mobile/clothing~d~5/" class="deptId5">Clothing</a></li>
    <li><a href="/mobile/shoes~d~4/" class="deptId4">Shoes</a></li>
    <li><a href="/mobile/sports-and-outdoors~d~4868/" class="deptId4868">Sports &amp; Outdoors</a></li>
    <li><a href="/mobile/for-the-home~d~3/" class="deptId3">For The Home</a></li>
    <li><a href="/mobile/mens~d~5284/" class="deptId5284">Men&#39;s</a></li>
    <li><a href="/mobile/womens~d~5324/" class="deptId5324">Women&#39;s</a></li>
    <li><a href="/mobile/kids~d~5363/" class="deptId5363">Kids&#39;</a></li>
    <li><a href="/mobile/bargain-barn/" class="extra deptBargainBarn">Bargain Barn</a></li>
    <li><a href="/mobile/listing/clearance~1/" class="extra deptClearance">Clearance Items</a></li>
    <li><a href="/mobile/new-products/" class="extra deptNewItems">New Items</a></li>
    <li><a href="/mobile/brand/listing/" class="extra deptBrands">Shop by Brand</a></li>
</ul>
<p id="results"></p>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

JavaScript

/*global jQuery, $*/
(function ($) {
    "use strict";
    $.fn.outerHtml = function () {
        var $this = $(this),
            thisElement = $this[0],
            content;
        if (thisElement.outerHTML) {
            content = thisElement.outerHTML;
        } else {
            content = $this.clone(false).wrap("<div>").parent().html();
        }
        return content;
    }
}(jQuery));
$(function () {
    "use strict";
    $("li").on("click", function (e) {
        $("#results").text($(this).outerHtml());
        e.preventDefault();
    });
});