How to get the outerHTML after the first jquery method?

Question

Anyone knows how to get the outerHTML from this point?....

  $("#sectionA tr[data-testlog='"+variableName+"']").first().outerHTML;

Returns an undefined....

Answer 1

outerHTML is a DOM property so you first would have to access the DOM element wrapped inside your jQuery object

You can do this using each

$(/*any jquery stuff*/).each(function(idx, domEl) {
    console.log(domEl.outerHTML);
});

If you know that you have exactly one match, or want to get only the first element, you should do:

$(SELECTOR)[0].outerHTML // or access any other **DOM** property

In your case:

$("#sectionA tr[data-testlog='"+variableName+"']")[0].outerHTML 
// first() would be redundant and unnecessary

Basically you can think of your jquery object as a wrapper around an array of DOM elements, that adds a gazillion functionalities that make developers happy, and functionality cross-browser compatible.

According to MDN outerHTML is supported in:

Firefox (Gecko): 11    since 2012-03-13
Chrome: 0.2            since 2008-09-02
Internet Explorer 4.0  since 1997
Opera 7                since 2003-01-28
Safari 1.3             since 2006-01-12

Or as akluth suggested the other question you could

// select your element
$(SELECTOR)
// clone it (outside the dom of the page)
.clone()
// wrap it in another element
.wrap('<div>')
// get the parent - basically the wrapper you just added
.parent()
// and get its inner html - all the html your SELECTOR initially selected
.html();

// all in one line
$(SELECTOR).clone().wrap('<div>').parent().html();

This would be a more costly operation done all by jQuery, but would as well be a crossbrowser solution. outerHTML might (or might not) be supported equally on all browsers/platforms.