Question

<!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>

这不会在页面上产生任何内容！为什么呢？

Answer 1

当您真正打算获取正文标记时，您正在寻找id属性为body的DOM元素。

// Instead of
var root = document.getElementById("body");

// Try:
var root = document.body;

您还可以将<body>标记的id属性添加为<body id='body'>，而无需修改JavaScript，但这似乎不合适。修改您的脚本以改为使用document.body。

更新

您正在覆盖每组行中innerHTML的{{1}}属性。我们没有看到您的标记中甚至定义了btnPrev的位置。也许每次定义btnPrev时，您打算定义var test？

Answer 2

当我通过IE调试器运行时，我得到了：'btnPrev'未定义。

Answer 3

您必须更改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);
    }

Answer 4

以下更改是我需要的（更新的）代码才能让它在Firefox中运行：

var root = document.body;

（或者为身体元素指定一个ID，无论哪种方式都有效。）

之后，问题变成“你正在测试哪种浏览器？”

在版本9之前的IE中不起作用，因为较旧的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;

为什么我的JS / DOM代码没有显示任何内容？

4 个答案:

更新