0

Have run into jquery question while learning ajax.

$('div_hello'); --> answers an 'Object'

document.getElementById('div_hello'); --> answers an 'HTMLDivElement'

getElementById works ($ does not). For this experiement, I simply want to use innerHTML.

Not clear on how a jquery 'Object' differs from an HTML element. How would I ie set the html of the jquery object?

thank you

1

3 Answers 3

5

You can use .html() like this:

$('#div_hello').html("content")

Or get the DOM element and use .innerHTML, like this

$('#div_hello')[0].innerHTML = "content";
//or
$('#div_hello').get(0).innerHTML = "content";

Note that your selector should be '#div_hello' like I have above, #id selectors are prefixed with a #, otherwise it's an element selector (and looking for a <div_hello> element).

The jQuery object is just a wrapper, it contains an array of references to DOM elements that it acts on, so think of it as "on top of" the DOM element. This is why [0] gets the element directly, because that element is first in the array that your selector found.

4
  • Thank you much all, A lot of wheel spinning last night and you cleared it up in 5 mins - works: $('#div_hello').html("<h1>Hello World</h1>"); fails: $('div_hello').html("<h1>Hello World</h1>"); Need the "#" I wonder why w/o the "#" it didn't blow up (result was nop)
    – Gary
    Nov 3, 2010 at 13:59
  • Without the #, you are selecting by element name. $('div') selects all <div> elements. $('#div') selects all elements with an id of "div". $('.div') selects all elements with a CSS class of "div". (I strongly recommend against using HTML element names as element ids or css class names. It just leads to confusion. I used it only for example.) The reason that $('div_hello') is legal is because you could be using the selector on a XML doc, which might have a <div_hello> element. Nov 3, 2010 at 21:04
  • @James - I covered that in the answer :) Nov 3, 2010 at 21:08
  • My bad for skimming too quickly and just jumping to Gary's follow-up where he still seemed confused by why $('div_hello') was failing. Apologies. :) Nov 3, 2010 at 21:13
2

Not clear on how a jquery 'Object' differs from an HTML element.

A jQuery object is in fact completely different from the underlying DOM element. They are not interchangeable.

You should use the framework's native functions when dealing with $() objects, as Nick shows in his answer.

If you need to access the underlying element though, you can do so using

$('#div_hello')[0].innerHTML
1
  • Thank you much all, A lot of wheel spinning last night and you cleared it up in 5 mins - works: $('#div_hello').html("<h1>Hello World</h1>"); fails: $('div_hello').html("<h1>Hello World</h1>"); Need the "#" I wonder why w/o the "#" it didn't blow up (result was nop)
    – Gary
    Nov 3, 2010 at 13:54
0

(formatted text this time)

Thank you much all,

A lot of wheel-spinning last night and you cleared it up in 5 mins -

works: $('#div_hello').html("

Hello World

");

fails: $('div_hello').html("

Hello World

");

Need the "#"

I wonder why w/o the "#" it didn't blow up (result was nop).

Thank you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.