<!DOCTYPE html>
<html>
<head>
<title>My test</title>
<style>
.img {
display:inline-block;
border:dotted;
}
.button {
display:inline-block;
border:dotted;
}
</style>
<script>
//Loads all the elements and assigns event handlers
function load()
{
var root = document.getElementById("body");
var test = document.createElement("div");
test.setAttribute("class", "button");
test.setAttribute("id", "p");
test.innerHTML = "Prev"
root.appendChild(test);
var test = document.createElement("div");
test.setAttribute("class", "main");
test.innerHTML = "Anne"
root.appendChild(test);
var test = document.createElement("div");
test.setAttribute("class", "main");
test.innerHTML = "Anise"
root.appendChild(test);
var test = document.createElement("div");
test.setAttribute("class", "main");
test.innerHTML = "Anna"
root.appendChild(test);
var test = document.createElement("div");
test.setAttribute("class", "button");
test.setAttribute("id", "n");
test.innerHTML = "Next"
root.appendChild(test);
}
document.addEventListener("DOMContentLoaded", load, false)
</script>
</head>
<body>
</body>
</html>
这不会在页面上产生任何东西!为什么?
您正在寻找具有body
的id
属性的DOM元素,当您真正打算获得body标记时。
// Instead of
var root = document.getElementById("body");
// Try:
var root = document.body;
你也可以添加一个id属性到<body>
标签作为<body id='body'>
,而不必修改你的JavaScript,但这似乎有点不合适。修改脚本,使用document.body
代替。
您正在覆盖btnPrev
在每组行的innerHTML
属性。我们甚至没有看到btnPrev
在标记中的定义。也许每次定义var test
时,您都打算定义btnPrev
?
当我通过IE调试器运行这个时,我得到:'btnPrev'未定义。
您必须更改load()函数中使用的变量名称。您正在将DOM引用存储到test
变量中,但(test
)它不用于设置属性值。
var btnPrev = document.createElement("div");
btnPrev.setAttribute("class", "button");
btnPrev.setAttribute("id", "p");
btnPrev.innerHTML = "Prev"
root.appendChild(btnPrev);
编辑: function load()
{
var root = document.body;
var test = document.createElement("div");
test.setAttribute("class", "button");
test.setAttribute("id", "p");
test.innerHTML = "Prev"
root.appendChild(test);
var test = document.createElement("div");
test.setAttribute("class", "main");
test.innerHTML = "Anne"
root.appendChild(test);
var test = document.createElement("div");
test.setAttribute("class", "main");
test.innerHTML = "Anise"
root.appendChild(test);
var test = document.createElement("div");
test.setAttribute("class", "main");
test.innerHTML = "Anna"
root.appendChild(test);
var test = document.createElement("div");
test.setAttribute("class", "button");
test.setAttribute("id", "n");
test.innerHTML = "Next"
root.appendChild(test);
}
我只需要对你的(更新过的)代码做以下修改,就可以让它在Firefox中工作了:
var root = document.body;
(或者为body元素指定一个ID,两种方法都可以)
之后,问题变成了"你用哪个浏览器测试?"
它不能在ie9版本之前工作,因为旧的IE版本不支持.addEventListener()
或DOMContentLoaded
事件。
在IE7(我必须测试的唯一版本的IE)中,以下内容对我有效:
if (document.addEventListener)
document.addEventListener('DOMContentLoaded', load, false);
else if (window.attachEvent)
window.attachEvent('onload',load);
else
window.onload = load;