jQuery get html of a whole element

Question

I wish to get the entire html of a selected element not just it s contents   html   uses javascripts innerHTML   method according to the documentation   HTML    lt div id  divs  gt     lt div id  div1  gt       lt p gt Some Content lt  p gt     lt  div gt     lt div id  div2  gt       lt p gt Some Content lt  p gt     lt  div gt   lt  div gt    Using     divs first   html    will return just the paragraph element  I want to get the html for the whole element  like so      lt div id  div1  gt       lt p gt Some Content lt  p gt     lt  div gt    I can t use  parent because this will return html of both child divs

User · Accepted Answer

You can clone it to get the entire contents, like this:

var html = $("<div />").append($("#div1").clone()).html();

Or make it a plugin, most tend to call this "outerHTML", like this:

jQuery.fn.outerHTML = function() {
  return jQuery('<div />').append(this.eq(0).clone()).html();
};

Then you can just call:

var html = $("#div1").outerHTML();

User · Answer

You can easily get child itself and all of its decedents  children  with Jquery s Clone   method  just  var child       div div nth-child 1    clone       var child2       div div nth-child 2    clone      You will get this for first query as asked in question   lt div id  div1  gt        lt p gt Some Content lt  p gt   lt  div gt

User · Answer

Differences might not be meaningful in a typical use case  but using the standard DOM functionality      el   0  outerHTML   is about twice as fast as       lt div   gt    append     el   clone    html      so I would go with          Return outerHTML for the first element in a jQuery object     or an empty string if the jQuery object is empty        jQuery fn outerHTML   function        return  this 0     this 0  outerHTML

User · Answer

You can achieve that with just one line code that simplify that       divs   get 0  outerHTML   As simple as that

[jquery] jQuery, get html of a whole element

Examples related to jquery

Examples related to html