<html>
<head>
<title></title>
<script src="https://www.jb51.net/js/jquery-1.4.4.js" type="text/javascript"></script>
<script>
$(function(){
$('#container').html('<script src="https://www.jb51.net/article/service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>');
});
</script>
</head>
<body>
<div>
</div>
</body>
</html>
此时，各个浏览器中的行为一致：
test2.htm
通过jQuery的html函数解决动态添加JavaScript的顺序问题
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11
6. 后记
为什么jQuery的html函数能够确保动态加载JavaScript的执行顺序呢？
我们知道通过简单的 .innerHTML 更新DOM节点，是不会让其中的JavaScript的执行，我们可以简单的把这个例子的源代码改成：
$('#container')[0].innerHTML = '<script src="https://www.jb51.net/article/service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>';
这种情况下jQueryUI根本不会加载。
那么jQuery是如果做到的呢？下篇文章我们会追根溯源，详细分析jQuery源代码，请继续浏览： 如何确保JavaScript的执行顺序 – 之jQuery.html深度分析
您可能感兴趣的文章: