How do I get the markup of an element, including itself using jQuery?

Question

I know I can wrap it's .html() in a tag, but the element itself has a dynamically set id, class, etc. How do I get jQuery to return the element's markup including itself?

Solution 1

As far as I know, there is no "outerHTML" support directly in jQuery, but you can write a function to emulate it (in browsers other than IE), or use this plugin:

// this will return the element and it's mark-up, of an element
// with the id myTag
var outer = $('#myTag').outerHTML();

Obviously Brandon's is not the only implementation.. I'm sure you could also come up with other clever implementations..

EDIT

If you're keen on avoiding the calls to append, maybe you could try something like this..

function getOuterHTML(el)
{   
    var wrapper = '';

    if(el)
    {
        var inner = el.innerHTML;
        var wrapper = '<' + el.tagName;

        for( var i = 0; i < el.attributes.length; i++ )
        {
            wrapper += ' ' + el.attributes[i].nodeName + '="';
            wrapper += el.attributes[i].nodeValue + '"';
        }
        wrapper += '>' + inner + '</' + el.tagName + '>';
    }
    return wrapper;
}


// now, to replicate the sample above
var outer = getOuterHTML($('#myTag'));

The only thing is, I'm not sure if all browsers support the attributes array.. but I know the mozilla-family ones do, and IE has native support for outerHTML.. give it a try (for the ones that don't support the attributes array you could use the previous method that uses appends)

Solution 2

This will work well:

jQuery.fn.outer = function() {
    return $($('<div></div>').html(this.clone())).html();
} 

Solution 3

Uhm, you don't need to use a plugin, I'm sure you can try

// this uses the jquery selectors, then returns the DOM element, 
// which then u can use the standard outterHTML...
$('#myelement').get(0).outerHTML;

Edit: if your jquery selectors are matching more than one item, you can loop thru them, refer to the jquery docs for examples

Solution 4

This blog post might help you.

He describes a technique that looks like this:

var html = $('<div>').append($('#top').clone()).remove().html()

This clones the div of interest, appends it to a wrapper div, and then gets the html of the wrapper - which equates to the original html of the first div.

His suggestion of just surrounding it initially in a declared wrapper div seems like a better way to go though. Then you wouldn't need to bother with all this.

Solution 5

Little late to this question. If you use jQuery to find an object you can use the following code to get the outerHTML.

HTML:

<div class="obj">
    <a href="#" class="link">Link</a>
</div>

jQuery:

var $obj = $('.obj .link');
var outerHTML = $obj[0].outerHTML;

That will output <a href="#" class="link">Link</a>. Tested on Latest Chrome, Latest Firefox and IE11. Here is a link to a codepen: http://codepen.io/aj372/pen/ZLmYbj

View more solutions

Comments

[Justin Lee]

I should have stated this before, but I am working with an extreme number of items and recently found out that .append() is a processor hog. Any way to do this without .append()?

[Chetan S]

outerHTML (it is a property, not a function btw) is not supported in Firefox (I think only IE supports it)

[Mike Dinescu]

@Justin, please see the example I added to the answer. It doesn't use any appends..

[Henry]

That will return all children of the parent. Not just the child or children selected.