I'm trying to get the HTML of the selected object using jQuery. I know the. html() function; the problem is that I need the HTML that contains the selected object (in this case, the table row, where. html() returns only the cells in the row).

I searched around and found some cloned objects, added them to the newly created div and other very "hackish" type methods, and so on, but it seemed dirty. Is there a better way, or does the new version of jQuery (1.4.2) provide any kind of outerHtml function?

#1st floor

$("#myNode").parent(x).html(); 

Where "x" is the node number, and the first one starts from 0. If you want to get a specific node number, you should get the correct node you need. If you have children, you should actually place an ID on the desired node, and enter only zero on that node. With this approach, no "x" suits me.

#2nd floor

I think at present (May 1, 2012), all major browsers support external HTML functions. In my opinion, this segment is enough. I personally choose to remember:

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the outside wrapper as well only for the first element
$('.classSelector')[0].outerHTML

// Gives you the outer HTML for all the selected elements
var html = '';
$('.classSelector').each(function () {
    html += this.outerHTML;
});

//Or if you need a one liner for the previous code
$('.classSelector').get().map(function(v){return v.outerHTML}).join('');

Edit: element.outerHTML Basic support statistics

• Firefox(Gecko): 11 .... Issued on March 13, 2012
• Chrome: 0.2 ...... Issued on September 2, 2008
• Internet Explorer 4.0 ... Issued in 1997
• Opera 7 ............................... Issued on January 28, 2003
• Safari 1.3 ................... Issued January 12, 2006

#3rd floor

This is useful for changing elements on the dom, but not for passing html strings like this into jquery:

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

After some operations, I created a function that makes the above functions applicable to html strings:

$.fn.htmlStringOuterHTML = function() {     
    this.parent().find(this).wrap('<div/>');        
    return this.parent().html();
};

#4th floor

I have done a simple test, in which external html is the tokimon solution (no clone), and outer HTML 2 is the jessica solution (clone)

console.time("outerHTML");
for(i=0;i<1000;i++)
 {                 
  var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML();
 }                 
console.timeEnd("outerHTML");

console.time("outerHTML2");

 for(i=0;i<1000;i++)
 {                 
   var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2();
  }                 
  console.timeEnd("outerHTML2");

The result in my Chrome (version 20.0.1132.57 (0)) browser is

externalHTML: 81 MS
outsideHTML2: 439ms

However, if we use a tokimon solution without native external HTML (now almost all browsers support this feature)

We get

externalHTML: 594ms
outsideHTML2: 332ms

There will be more loops and elements in the real world examples, so the perfect combination will be

$.fn.outerHTML = function() 
{
  $t = $(this);
  if( "outerHTML" in $t[0] ) return $t[0].outerHTML; 
  else return $t.clone().wrap('<p>').parent().html(); 
}

So cloning is actually faster than wrapping / unwrapping
(jquery 1.7.2)

#5th floor

Simple solution.

var myself = $('#div').children().parent();