innerHTML 和 .html() 方法的区别（来自jQuery）

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），脚本就无法正常工作；-(

可能的原因是什么？

- kuba

Answer 1

jQuery的.html()方法是用于访问和操作innerHTML的多功能函数。当用作setter时，它返回jQuery集合以进行链接。当用作getter时，它返回集合元素内部的标记表示。

当你将其用作setter——将标记写入一个元素时，jQuery会读取标记并从其中提取脚本。然后将它们分别添加到DOM中，以一种引起执行的方式。.html()隐式地导致一些操作（其中之一是脚本处理），而写入innerHTML只会使innerHTML更改，但这些HTML做的很少。

- JAAulde

---

好的，但是这个提取在jQuery库代码中的哪里？我在.html()中没有找到它（也许这是因为我不是真正的JavaScript高手：））我只是尽可能地试图理解这个案例 :) - kuba

.html() 使用 .append()，而 .append() 使用 domManip()，domManip() 则执行脚本嗅探和执行。 - JAAulde

好的，看来这个domManip()函数是关键函数:-)谢谢:-) - kuba

Answer 2

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

jQuery包含特殊代码，可以为您执行脚本。

- SLaks

---

我查看了源代码，但是我没有找到任何特殊的内容可以执行脚本。事实上，它试图使用innerHTML自身。 - Ikke

是的，确切地说，在.html()内部也有注释，它们首先检查是否可以仅使用简单的innerHTML。 - kuba

@Ikke .html() 使用 .append()，而 .append() 又使用 domManip()，domManip() 则执行脚本嗅探和执行。 - JAAulde

@JAAulde 啊，对了。它会检查rnocache模式是否有脚本标签，然后跳过innerHTML部分。 - Ikke

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>

为什么要在 div 中插入 JavaScript 警告框？

- Faraona

---

警告仅用于测试目的，而不是使用 alert 的其他 JS 代码。整个想法不是我自己的，我只是在重构代码 :) - kuba