javascript - getElementByID 因 Bootstrap Modals 而失败

Question

我对 JS getElementByID 有以下问题:我有一个带有 Bootstrap Modal 的 .php 文件 (kalender.php)。因此，在单击按钮 (#showModalDownload) 后，模态就会出现并且应该显示一些内容。但是首先触发一个 JS 脚本，它应该用一些内容填充模态。这是我的代码:日历.php

    <div class="modal fade" id="icsImport">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Absencen Herunterladen</h4>
                    </div>
                    <div class="modal-body">
                        <p>Bitte wählen Sie die zu exportierenden Absenzen aus</p>
                        <div id="downloadContent">

                        <div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                        <button type="button" class="btn btn-info">Herunterladen</button>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
<script src="javascripts/main.js"></script>
</body>

主要.js

$('#showModalDownload').click(function(){
$("#icsImport").modal('show');
$.ajax({
    type: "POST",
    url: "login.php",
    data: {"export": "true"},
    dataType: "json",
    success: function(data){
        var response=(data);
        var container = document.createElement('div');
        var checkboxContainer = document.createElement('div');
        checkboxContainer.setAttribute('class', 'checkbox');
        var label;
        var checkBox;

        for(i=0;i<response.length;i++){
            label = document.createElement('label');
            checkBox = document.createElement('input');
            checkBox.type = "checkbox";
            label.appendChild(checkBox);
            label.innerHTML = "test";
            // label.innerHTML = response['date'][i] + " " + response['typ'][i];

            checkboxContainer.appendChild(label);
            container.appendChild(checkboxContainer);
        }

        $(document).ready(function(){
            downloadContent = document.getElementById('#downloadContent');
            downloadContent.appendChild(container);
        });
    }
});

});

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

首先我认为这是因为 js 在我的模式创建之前以某种方式运行。但是 javaScript include 在我的模式之后，就在标签之前，我已经把我的 getElementById 放在了

$(document).ready(function()

区域。

有人可以帮帮我吗？

谢谢分配

亚尼克

Answer 1

您传递给 getElementById 的值只是 id，而不是选择器。不要将 # 放在它前面。

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

但是既然您正在使用 jQuery，为什么不……使用 jQuery？

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

(该成功处理程序的其他方面也可以更好地利用 jQuery，但这可能是最想要的一点，尤其是因为 jQuery 解决了旧版本 IE 上 getElementById 中的错误.)