Question

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

Answer 1

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.