Question

我正在尝试使用.innerHTML和getElementById更新动态生成的div的内容，但是当我测试它时，我收到一个错误：＆＃34; Uncaught TypeError：无法设置属性＆＃39; innerHTML＆＃39; of null＆＃34;我也尝试使用alert（）并在断点处检查quizDiv的值。好吧，这是我的JS文件main.js：

function makeDiv() {
document.body.innerHTML = "<div id='quizDiv'></div>"
}
function createInputBox(boxId) {
     var quizDiv = document.getElementById("quizDiv");
     quizDiv.innerHTML = "<input type='text' id='" + boxId + "'>";
 }
makeDiv();
createInputBox(1);

这是我的HTML：

<!-- doctype, head, etc -->
<body>
<!-- content -->
<script src="/main.js"></script>
</body>

感谢任何帮助。谢谢！

Answer 1

由于你已经在js中创建了div，为什么不保留引用呢？

function makeDiv() {
    var quizDiv=document.createElement("div");
    document.body.appendChild(quizDiv);
    return quizDiv;
}
function createInputBox(quizDiv,boxId) {
     // var quizDiv = document.getElementById("quizDiv");
     quizDiv.innerHTML = "<input type='text' id='" + boxId + "'>";
 }
var quizDiv=makeDiv();
createInputBox(quizDiv,1);

Answer 2

您的代码存在一些问题。

首先，HTML无效，这意味着ID不能以数字开头。在此处详细了解如何克服此问题：CSS-Tricks

其次，您编码＆＃39;工作＆＃39;你能提供你的目录结构和完整标记的图像吗？这是一个jsfiddle与您的代码，它显示输入：jsFiddle可能文件路径有问题或您在文档准备好之前调用js文件。

我清理了你的代码，所以也许试试这个：

window.onload = function () {

    var body = document.body;

    function createDiv (identifier) {
        var el = document.createElement('div');
        el.id = identifier;

        body.appendChild(el);
    }

    function createInput(identifier) {
        var div = document.getElementById('quizDiv');
        div.innerHTML = "<input type='text' id='" + identifier + "'>";
    }

    createDiv('quizDiv');
    createInput('bar');
};

document.getelementById不适用于动态生成的div

2 个答案: