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 · 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

$("<div />").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

User · Answer

You can clone it to get the entire contents  like this   var html       lt div   gt    append     div1   clone    html      Or make it a plugin  most tend to call this  outerHTML   like this   jQuery fn outerHTML   function       return jQuery   lt div   gt    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

[jquery] jQuery, get html of a whole element

Examples related to jquery

Examples related to html