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?

Answer 1

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.

Answer 2

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)

Answer 3

Without any code, select the element, select the first inner element, get its parent (the one you want) then wrap it around the original selection from youElement.html().

Answer 4

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

Answer 5

This will work well:

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