return a single html element with jquery

Question

How can I get jQuery to return a html element exactly the way that getElementById does?

if I console.log($('#container')) I will get :

[<div id="container"></div>]

But the API I am interacting with obviously doesn't want that (an array) - it wants :

<div id="container"></div>

I know I can achieve this with $('#container').get(0) and a few other ways, It just seems overkill - especially as I'm selecting an ID which will always be unique.

What am I missing guys?

Thanks

In fact, I do not see a question here. You know more than you try to ask. — VisioN
– VisioN, Commented Jun 20, 2012 at 20:11
I know it seems an odd question! I am currently using getElem... but I have a few HTML nodes I'm accessing and just wondered if I could cut down on typing! haha! — shakyShane
– shakyShane, Commented Jun 20, 2012 at 20:18
To cut down on typing, define your own shortcut replacement function for document.getElementByid() like I've shown in my answer below. — jfriend00
– jfriend00, Commented Jun 20, 2012 at 20:19

jfriend00 · Accepted Answer · 2012-06-20 20:18:23Z

5

If you just want a single DOM element, then just use plain javascript:

var obj = document.getElementById("container");

jQuery selectors always create a jQuery object with an array of elements in it. That's just the way it's designed. If you want a single element, you either get the first element out of the jQuery object or you use a different tool.

From a jQuery object, you can get the first object either with:

$('#container').get(0)

or with:

$('#container')[0]

But, I would argue that both are more than you need if all you want is the single object that has an id. Just use document.getElementById(). If you want less typing, you could make your own short function:

function $$(id) {
    return(document.getElementById(id));
}

var obj = $$("container");

edited Jun 20, 2012 at 20:18

answered Jun 20, 2012 at 20:10

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rodolfo Over a year ago

just a thing, should be "container" not "#container"

jfriend00 Over a year ago

@Rodolfo - yes, I fixed the typo.

kwelch Over a year ago

You should drop the # it will not work with plain javascript.

shakyShane Over a year ago

Thanks man. You answered my question with jQuery selectors always create a jQuery object with an array of elements in it - I was wondering if it could return a single element, to help me cut down on characters. :p

jfriend00 Over a year ago

@user1036214 - Did you see the last part of my answer that makes for less typing?

|

Clark T. · Accepted Answer · 2012-06-20 20:09:19Z

0

try using .html() it will return the html of the element your selecting see:

http://api.jquery.com/html/

answered Jun 20, 2012 at 20:09

Clark T.

1,4702 gold badges11 silver badges25 bronze badges

1 Comment

j08691 Over a year ago

That will return the contents of the element, not the element itself.

Collectives™ on Stack Overflow

return a single html element with jquery

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related