为什么我的 JS/DOM 代码不显示任何内容？答案

【问题标题】：Why is my JS/DOM code displaying no content?为什么我的 JS/DOM 代码不显示任何内容？
【发布时间】：2011-11-28 11:20:51
【问题描述】：

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

这不会在页面上产生任何东西！为什么？

【问题讨论】：

标签： javascript html css dom

【解决方案1】：

您正在寻找具有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？

【讨论】：

很好，但是，我现在看到的只是添加的最后一件事。 “下一个”
@antonpug btnPrev 似乎在任何地方都不存在。

【解决方案2】：

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

【讨论】：

它可能会在 IE 中失败...因为它是 IE？
在 Firefox 中也失败了...btnPrev 未定义。

【解决方案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);
    }

【讨论】：

【解决方案4】：

我需要对您的（更新的）代码进行以下更改以使其在 Firefox 中运行：

var root = document.body;

（或者为 body 元素分配一个 ID，无论哪种方式都有效。）

之后，问题就变成了“您正在使用哪个浏览器进行测试？”

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

【讨论】：