我正在努力学习JavaScript。我有一个测试文件,但它给了我一个错误。结果应该是3个空div。
Error: Cannot read property 'getElementsByClassName' of null
我试过调试并更改item = template.getElementsByClassName(“main”); to item = template.querySelectorAll(“#template div”);
HTML
<body>
<script src="test.js" charset="utf-8"></script>
<template id="test">
<div class="main">
<div class="">
</div>
</div>
</template>
<div class="site">
</div>
</body>
JavaScript的
var template, item, site, i, a;
template=document.getElementById("test");
item=template.getElementsByClassName("main");
site=document.getElementsByClassName("site");
for(i=0; i<3; i++){
a=document.importNode(item, true);
site.appendChild(a);
}
它不起作用的原因是你试图获取3个类名为“main”的元素。但只有1存在,这就是为什么它抱怨它无法读取不存在的东西的属性。所以我更新了代码以获取3个空div
此外,最后一个div是站点div,并且您正在尝试向其添加元素。您将遇到一个问题,您将尝试将自身添加到自身。我稍微更新了代码,因此您不会遇到此问题
var template, item, site, i, a;
template=document.getElementById("test");
item=template.querySelectorAll("#template div");
site=document.getElementsByClassName("site")[0];
for(i=0; i<item.length; i++){
a=document.importNode(item, true);
site.appendChild(a);
}