我有一个基本的HTML页面,仅包含:
<body id="body">
<script src="js/jquery-2.0.3.js" type="text/javascript"></script>
<script src="js/three.min.js" type="text/javascript"></script>
<script src="js/stats.min.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>
</body>
作为index.html
页面的主体,application.js
的内容为:
function init() {
var container = $('div');
container.attr('id', 'container');
$('body').append(container);
alert('Container: ' + $('#container').length);
}
$(function() {
init();
});
所以这显然是一些非常基本的代码,我创建了一个div并将其附加到正文中。但是,我调用的alert
调用返回0
,当我通过chrome检查DOM树时,不会添加div。
当我将脚本文件添加到<body>
标记的底部,并从jQuery init()
块调用ready()
时,为什么会发生这种情况?看起来像是一个基本而简单的任务。
注意:chrome的控制台
中没有抛出任何错误答案 0 :(得分:2)
$('div')
这会使用元素选择器选择页面中的所有<div>
元素
您没有任何<div>
元素,因此它返回一个空的jQuery对象。
因此,其余代码无效。
听起来你真的想要创建一个新元素:
$('<div />')
答案 1 :(得分:2)
您的专线var container = $('div');
并非正在创建 DIV,而是选择。如果您想创建容器,请执行var container = $('<div></div>');
因此,您当前的代码返回一个空的jQuery对象,但是您没有注意到jQuery与它们很好地匹配,并且什么都不做。