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

Why is my JS/DOM code displaying no content?

本文关键字：显示 代码 我的 JS DOM 为什么      更新时间：2023-09-26
<!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;
相关文章：