Why can't you call outerHTML on $(this)?

Question

When you want to get the HTML of an entire DOM element (wrapper included), you can do the following (as explained here):

$('#myElementId')[0].outerHTML

But what you can't do is call outerHTML on $(this) inside e.g. a click listener or selector function body scope:

$(this).outerHTML //Doesn't complete in IntelliSense, returns undefined in browser

or

$(this)[0].outerHTML //Correction, this DOES work, but it doesn't complete in IntelliSense

because IntelliSense won't show innerHTML or outerHTML in those circumstances, although with vanilla JavaScript you can do:

document.getElementById($(this).attr('id')).outerHTML

So... what's up with that?

Did you actually try in the browser itself? I don't particularly see the point of using `outerHTML` that way but that should work. — Qantas 94 Heavy, Jun 05 '15 at 07:49
Maybe Intellisense is unable to determine that `$(this)[0]` is a DOM element, so it doesn't suggest DOM members. — Frédéric Hamidi, Jun 05 '15 at 07:51
Leaning towards @FrédéricHamidi's explanation. Do you get any intellisense on `$(this).get(0).outerHTML`? — Jordan Gray, Jun 05 '15 at 11:04
Huh, interesting, I thought that would work! Are you getting autocomplete hints for the `.get` method, even? (I've tried to reproduce this, but am getting different results from you.) — Jordan Gray, Jun 05 '15 at 13:17

score 24 · Accepted Answer · edited Jun 05 '15 at 08:47

24

outerHTML is a DOM property; jQuery doesn't expose all DOM properties.

If you have a jQuery object, you can only directly access those properties and methods that jQuery exposes, and vice versa for DOM objects.

In object-oriented terms, jQuery objects don't inherit from DOM objects, they contain them.

Saying $x[0] gets you the DOM object for the first element represented by a jQuery object.

edited Jun 05 '15 at 08:47

Qantas 94 Heavy

15,750
31
68
83

answered Jun 05 '15 at 07:51

RichieHindle

272,464
47
358
399

3

Questioner does say that Intellisense fails to complete `$(this)[0].outerHTML`, so it's not only a jQuery object / DOM element issue. – Frédéric Hamidi Jun 05 '15 at 07:54
5

@FrédéricHamidi: I guess Intellisense isn't clever enough to determine that a jQuery object's array accessor `[]` returns a DOM element. – RichieHindle Jun 05 '15 at 07:57
@FrédéricHamidi it actually does *not* complete `$(this)[0].outerHTML` although it works in the browser. – Wim Ombelets Jun 05 '15 at 08:00
3

@Wim, yup, that's what I said :) Several of us are thinking this is an Intellisense limitation. In any case, both `this.outerHTML` and `$(this)[0].outerHTML` will work as expected, even if Intellisense apparently cannot infer that. – Frédéric Hamidi Jun 05 '15 at 08:02
thank you for your insights and prompt answers, people! – Wim Ombelets Jun 05 '15 at 08:07
1

The intellisense issue very much depends on what intellisense your using, I find the built in intellisense in VisualStudio terrible at js for example. Trusting intellisense in none compiled languages like js is always going to be hit and miss. – Liam Jun 05 '15 at 10:22

score 20 · Answer 2 · edited Jun 05 '15 at 08:04

20

You can use directly this to access outerHTML of the current object instead of indirectly going through $(this) as this represents the DOM object (which has outerHTML property) whereas $(this) represents jQuery object.

this.outerHTML

edited Jun 05 '15 at 08:04

axelduch

10,769
2
31
50

answered Jun 05 '15 at 07:49

Adil

146,340
25
209
204

Yeldar Kurmangaliyev · Answer 3 · 2015-06-05T08:02:05.960

5

jQuery selector returns an array-like jQuery object which has no outerHTML property.

However, the jQuery resulting array contains DOM elements.
It means that you can actually access it this way.

$(".someClass")[0].outerHTML // it works for me

Update: It works for me in every browser.
I can access array-like jQuery object in a click event handler as well.

$(".someClass").click(function()
{
    alert($(this)[0].outerHTML); // it works me too
});

Here is my JSFiddle: http://jsfiddle.net/13btf60p/

Update 2:

OK, now I get your question. It should have worked. Do you really need an IntelliSense to complete such a plain and simple construction?

edited Jun 05 '15 at 08:02

answered Jun 05 '15 at 07:51

Yeldar Kurmangaliyev

33,467
12
59
101

5

The OP claims that `$(this)[0].outerHTML` doesn't work properly either. The fact that jQuery returns an array-like object is irrelevant. – Qantas 94 Heavy Jun 05 '15 at 07:54
@Qantas94Heavy It properly works for me in different browsers. I can access `$(this)[0].outerHTML` on click event. – Yeldar Kurmangaliyev Jun 05 '15 at 07:59
it's uncanny how much you can come to depend on intellisense, to the point where you'll doubt anything (even the obvious) when it fails to deliver. I've wasted a LOT of time in my life feeling convinced that something SHOULD work although intellisense won't offer me options, just to discover that VS needed a restart or even an intellisense cache clear before it would properly work again. At times it can rattle your confidence, I feel. – Wim Ombelets Jun 05 '15 at 08:38

score 1 · Answer 4 · answered Jun 06 '15 at 13:50

I will add what I found to be the correct solution to what ended up being a simple flaw in the default Visual Studio settings for future reference.

Since I didn't want to let this go, I searched further and found out that, by default, jQuery IntelliSense is somewhat deplorable out of the box in Visual Studio 2013.

Under

Tools > Options > Text Editor > Javascript > IntelliSense > References

I set

Reference Group: "Implicit (Web)"

and added an existing jQuery file. This solved all issues of my question and IntelliSense now suggests all members and methods correctly, although this should have simply worked out of the box instead of costing everyone a bunch of time.

score 0 · Answer 5 · edited Mar 27 '19 at 08:40

0

this.outerHTML is enough.

If you use getElementById maybe you can use:

var table = document.getElementById('blablabla');

edited Mar 27 '19 at 08:40

Dwhitz

1,250
7
26
38

answered Mar 27 '19 at 07:34

Melih Sevim

930
6
9

Why can't you call outerHTML on $(this)?

5 Answers5