Функция InnerHTML-Self invoking работает, но почему jQuery document ready не работает?

Я тестировал, чтобы написать что-то в innerHTML, без какого-либо обработчика событий. Мне интересно, почему jQuery document ready не сработал - я думал, что это должна быть функция самопроизвольного вызова? Обычная функция самовзвращения действительно работала.

Если у меня есть это в HTML 

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

В JS работает регулярная функция самовзвращения: 

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

Но не функция готовности Jquery: 

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

Если я помещаю функцию Jquery сверху, то другая функция перестает работать - как же так? Кроме того, функция самовозбуждения, которая заканчивается на} ()); - дополнительная скобка очень важна, иначе она не работает. Но я не понимаю, что означает эта скобка?

1 2
document-ready innerhtml

1 ответ:

Если вы используете Jquery, лучше использовать селекторы: 

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

Смотрите, как он работает, и играйте с ним: http://jsfiddle.net/c66t0tb2/

0