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

Question

我正在尝试使用 .innerHTML 和 getElementById 更新动态生成的 div 的内容，但是当我测试它时，出现错误："Uncaught TypeError: Cannot set property 'innerHTML' of null" 我也尝试使用 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

其次，你的代码 'works' 你能提供你的目录结构的图像和完整的标记吗？这是一个包含您的代码的 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

document.getelementById doesn't work on dynamically generated divs

javascript

html

getelementbyid

dynamically-generated