Разница между innerHTML и .html() из jQuery

Может кто-нибудь сказать, в чем разница между функцией jquery.html() и innerHTML?

<script type="text/javascript">
$(document).ready(function(){
            $('#test_link').click(function(){

                //$('#div_test_out').html("<div width='250px' height='100px' id='div_test'><script language='javascript'>alert('insider');<\/script>asddsa</div>");
                document.getElementById('div_test_out').innerHTML="<div width='250px' height='100px' id='div_test'><script language='javascript'>alert('insider');<\/script>asddsa</div>";      
            });
});
</script>
<a href="#" id="test_link" >TEST LINK :-)</a><br/><br/>
<div width="100px" height="100px" id="div_test_out"></div>

Когда я использую первый вариант, это jQuery, script внутри запусков и появляется предупреждение, но если я использую второй вариант, который с innerHTML (который я, хотя и тот же, и между ними нет разницы), script не работает; - (

В чем может быть причина?

Ответ 1

Метод jQuery.html() является многоцелевой функцией для доступа и управления innerHTML. При использовании в качестве сеттера он возвращает коллекцию jQuery для цепочки. При использовании в качестве геттера он возвращает представление разметки внутренних элементов коллекционных элементов.

Когда вы используете его как сеттер - для написания разметки в элемент - jQuery считывает разметку и извлекает скрипты изнутри. Затем он добавляет их в DOM отдельно таким образом, который вызывает их выполнение..html() неявно вызывает несколько операций (script как один), тогда как запись в innerHTML просто вызывает изменение innerHTML, но очень мало сделано с этим HTML.

Ответ 2

Установка свойства innerHTML не выполняет сценарии.

jQuery содержит специальный код для выполнения сценариев для вас.

Ответ 3

Я думаю, что это правильный способ:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>

<script type="text/javascript">
$(document).ready(function(){
            $('#test_link').click(function(){

                //$('#div_test_out').html("<div width='250px' height='100px' id='div_test'>asddsa</div>");
                document.getElementById('div_test_out').innerHTML="<div width='250px' height='100px' id='div_test'>asddsa</div>";     
                                alert('insider');
            });
});
</script>
<a href="#" id="test_link" >TEST LINK :-)</a><br/><br/>
<div width="100px" height="100px" id="div_test_out"></div>

Почему вы вставляете java script alert в div?