InnerHTML - Self invoking function works, but why doesn't Jquery document ready work?

Question

I was testing to write something in innerHTML, without any event handler. I'm wondering why Jquery document ready didn't work - I thought it was supposed to be a self invoking function? The regular self invoking function did work.

If I have this in HTML

<div id="content">
  <p><span id="html_span1"></span></p>
  <p><span id="html_span2"></span></p>
</div>    

In JS, the regular self invoking function works:

(function(){
     document.getElementById('html_span1').innerHTML = "self invoking function works";
}());    

But not Jquery ready function:

$(document).ready(function() {
    document.getElementById('html_span2').innerHTML = "Is this displayed?";
});    

If I place the Jquery function at the top, then the other function stops working - how come? Also, the self evoking function, which ends with }()); - the extra parenthesis is very important, otherwise it's not working. I don't understand the meaning of that parenthesis though?

Answer 1

If you are using Jquery better use selectors:

$( document ).ready(function() {
// Handler for .ready() called.
    $("#html_span2").html("Is this displayed?");
});

See it running and play with it: http://jsfiddle.net/c66t0tb2/