JavaScript Methods on jQuery Selectors

Question

How do I access the core HTML DOM element from a JQuery Selector?

For example, the following code:

$(document.body).appendChild(x);

will not work because the DOM object that $(document.body) is referring to is wrapped around by a JQuery Selector Object.

(Please don't suggest that I can use jQuery's append() instead, it's just for an example)

[Have you tried](http://meta.stackoverflow.com/questions/289336/is-it-okay-to-downvote-questions-asking-if-some-code-could-work-but-not-actually) what you want to try to see if it works? — D4V1D, Sep 10 '15 at 08:15
`$(document.body)[0].appendChild(x);`, here `$(document.body)[0]` returns dom object — Pranav C Balan, Sep 10 '15 at 08:16
If you're going to use native Javascript functions, why would you then use jQuery at all? You're then including thousands of lines of code for absolutely no purpose. — Chrillewoodz, Sep 10 '15 at 08:17
@Arjun Why do you want to wrap it in jq object? Actually, i don't see any reason from your posted example — A. Wolff, Sep 10 '15 at 08:19
@D4V1D It certainly does not work. I wanted to know _how to make it work_. I have also edited the question to highlight my intention. — Arjun, Jul 01 '17 at 09:09

Dennis · Accepted Answer · 2015-09-10T09:52:26.407

7

jQuery Objects are arrays of native DOM elements. So try this:

$(document.body)[0].appendChild(x)

On the other hand, if you have a native DOM element, you can just wrap it in a jQuery Object to use jQuery's methods on it.

var x = document.getElementsByTagName('div');
$(x).remove(); // wrap it with $ to use jQuery methods.

edited Sep 10 '15 at 09:52

answered Sep 10 '15 at 08:17

Dennis

14,210
2
34
54

4

jq object is array-like object, not just array – A. Wolff Sep 10 '15 at 08:19
`$(document.body).get(0).appendChild(x)`. – Jai Sep 10 '15 at 08:23
1

@Jai Why not `document.body` – Tushar Sep 10 '15 at 08:24
@Tushar because op wanted to assign a js method to a jquery object. and i guess your comment should be available on all other answer posted.....;) – Jai Sep 10 '15 at 08:26
@Arjun I edited my answer, I hope I understood you correctly! Otherwise, could you specify what you mean by `JavaScript selector`? – Dennis Sep 10 '15 at 09:53

kamil-mrzyglod · Answer 2 · 2015-09-10T08:23:34.647

2

Since jQuery is built on top of Sizzle you can refer to the Sizzle's documentation under this link.

Since $ is just an alias, you can refer to the documentation:

$(String selector[, DOMNode context[, Array results]])

The main function for finding elements. Uses querySelectorAll if available.

the above will return an array, even if there is only one element. So if you want to refer to the one element exactly, you have to use array index like:

$(document.body)[0].appendChild(x);

edited Sep 10 '15 at 08:23

answered Sep 10 '15 at 08:20

kamil-mrzyglod

4,948
1
20
29

@Arjun Can you elaborate on your statement? – kamil-mrzyglod Sep 10 '15 at 08:23
@Jai No. `var elem = document.querySelector('#parent .child:nth-child(1)'); $(elem).addClass('HelloWorld');` Calling jQuery methods on Javascript objects – Tushar Sep 10 '15 at 08:30
@Jai I know, but that's what the OP wants _vice versa_, I know this is not preffered when you can use jQuery directly but OP wants it – Tushar Sep 10 '15 at 08:38

score 2 · Answer 3 · answered Sep 10 '15 at 08:21

2

.get() should do the work like so :

$(document.body).get(0)

answered Sep 10 '15 at 08:21

Norlihazmey Ghazali

9,000
1
23
40

score 1 · Answer 4 · answered Sep 10 '15 at 08:20

1

this is a native DOM code which should definitely work:

document.body.appendChild(x)

answered Sep 10 '15 at 08:20

MoLow

3,056
2
21
41

JavaScript Methods on jQuery Selectors

4 Answers4