Bootstrap Modals 的 getElementByID 失败

Question

我在 JS getElementByID 方面遇到以下问题：\n我有一个带有 Bootstrap Modal 的 .php 文件 (kalender.php)。因此，单击按钮 (#showModalDownload) 后，模式会显示出来，并应显示一些内容。\n但首先会触发 JS 脚本，该脚本应使用一些内容填充模式。\n这是我的代码：\nKalender.php

\n\n

    <div class="modal fade" id="icsImport">\n            <div class="modal-dialog">\n                <div class="modal-content">\n                    <div class="modal-header">\n                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\n                        <h4 class="modal-title">Absencen Herunterladen</h4>\n                    </div>\n                    <div class="modal-body">\n                        <p>Bitte w\xc3\xa4hlen Sie die zu exportierenden Absenzen aus</p>\n                        <div id="downloadContent">\n\n                        <div>\n                    </div>\n                    <div class="modal-footer">\n                        <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>\n                        <button type="button" class="btn btn-info">Herunterladen</button>\n                        </form>\n                    </div>\n                </div><!-- /.modal-content -->\n            </div><!-- /.modal-dialog -->\n        </div><!-- /.modal -->\n<script src="javascripts/main.js"></script>\n</body>\n

\n\n

main.js

\n\n

$(\'#showModalDownload\').click(function(){\n$("#icsImport").modal(\'show\');\n$.ajax({\n    type: "POST",\n    url: "login.php",\n    data: {"export": "true"},\n    dataType: "json",\n    success: function(data){\n        var response=(data);\n        var container = document.createElement(\'div\');\n        var checkboxContainer = document.createElement(\'div\');\n        checkboxContainer.setAttribute(\'class\', \'checkbox\');\n        var label;\n        var checkBox;\n\n        for(i=0;i<response.length;i++){\n            label = document.createElement(\'label\');\n            checkBox = document.createElement(\'input\');\n            checkBox.type = "checkbox";\n            label.appendChild(checkBox);\n            label.innerHTML = "test";\n            // label.innerHTML = response[\'date\'][i] + " " + response[\'typ\'][i];\n\n            checkboxContainer.appendChild(label);\n            container.appendChild(checkboxContainer);\n        }\n\n        $(document).ready(function(){\n            downloadContent = document.getElementById(\'#downloadContent\');\n            downloadContent.appendChild(container);\n        });\n    }\n});\n

\n\n

});

\n\n

单击我的按钮后，模式会显示出来，但正如我在 Chrome 控制台中看到的那样，出现以下错误： Uncaught TypeError: Cannot call method \'appendChild\' of null

\n\n

首先我认为这是因为 js 在我的模态创建之前运行。但是 javaScript include 位于我的模态之后，就在标签之前，并且我已将 getElementById 放在

\n\n

\n

$(文档).ready(函数()

\n

\n\n

区域。

\n\n

有人可以帮帮我吗？

\n\n

谢谢分配

\n\n

亚尼克

\n

Answer 1

您传入的值getElementById只是id，而不是选择器。你不把 放在#它前面。

// No # here ------------------------------v
downloadContent = document.getElementById('downloadContent');
downloadContent.appendChild(container);

但是当您使用 jQuery 时，为什么不...使用 jQuery？

$("#downloadContent").append(container);

（成功处理程序的其他方面也可以更好地利用 jQuery，但这可能是最想要的，尤其是因为 jQuery 可以解决getElementById旧版 IE 中的错误。）