在javascript中从字符串创建bootstrap-modal

Question

我有以下代码（这是示例中的HTML）：

var modal=
        '<div class="modal fade" id="infoModal"'+id+'tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">'
        +'<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">Modal title</h4>'
        +'</div>'
        +'<div class="modal-body">'
        +'<p>One fine body&hellip;</p>'
        +'</div>'
        +'<div class="modal-footer">'
        +'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
        +'<button type="button" class="btn btn-primary">Save changes</button>'
        +'</div>'
        +'</div>'
        +'</div>'
        +'</div>';
        document.body.appendChild(modal);

我收到错误：

Uncaught NotFoundError：无法在'Node'上执行'appendChild'：新的子元素为null。

如果我在index.html中放入相同的HTML，它就可以了。 这有什么问题？

Answer 1

莫代尔不是一个元素。 它只是一个字符串。 appendChild需要一个实际的元素引用，而不仅仅是一个字符串。

虽然我不建议，但你可以做到

document.body.innerHTML = document.body.innerHTML+modal;

这是蹩脚的，将从正文中的任何内容中删除您的事件侦听器。

你也可以这样做：

var div = document.createElement('div');
div.innerHTML = modal;
document.body.appendChild(div);

现场演示（点击）。

如果我以字符串形式获得了那么多的标记，我只需将它放在一个html文件中，或者从服务器中包含它，或者通过ajax使用javascript加载它。

您还可以使用document.createElement为每个部分创建整个结构。