Question

有人能说出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，脚本内部运行，并显示警报，但如果我使用innerHTML的第二个选项（我虽然是相同的并且它们之间没有区别），脚本是不工作; - （

可能是什么原因？

Answer 1

jQuery的.html（）方法是一种用于访问和操作innerHTML的多用途函数。当用作setter时，它返回用于链接的jQuery集合。当用作getter时，它返回集合元素的内部标记表示。

当你将它用作setter时 - 将标记写入元素--jQuery读取标记并从内部提取脚本。然后，它会以导致其执行的方式将它们分别添加到DOM中。 .html（）隐式地导致一些操作（脚本处理为一个），而写入innerHTML只会导致innerHTML发生变化，但用HTML做的很少。

Answer 2

设置innerHTML属性不会执行脚本。

jQuery包含为您执行脚本的特殊代码。

Answer 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脚本警报插入div？

来自jQuery的innerHTML和.html（）之间的区别

3 个答案: