Question

I have this javascript function:

function clearDiv(div_id) {
    alert(div_id);
    $(div_id).empty();
}

And the following html:

<input value="Clear" type="button" onClick="clearDiv(div_to_clear)" />

<div id="div_to_clear">
    <!-- more html -->
</div>

Why is it that the above will actually find the javascript div object with id div_to_clear and use the $ selector to access it?

If I had done the input as :

<input value="Clear" type="button" onClick="clearDiv('div_to_clear')" />

I would need to change my function to

function clearDiv(div_id) {
    alert(div_id);
    $('#' + div_id).empty();
}

Is there any documentation about this? Are there advantages to using one method or the other?

Answer 1

IE (and Chrome in an effort for compatability) will create properties on the window with names of elements with ids, corresponding to those elements.

In the first example are are passing window.div_to_clear which points to your element directly. In the second, you are passing a string telling jQuery which element to select.

The first one is non-standard behavior so you should not rely on it.