从JavaScript输出HTML的推荐方法

Question

我知道以前可能有人问过这个问题，但我有一个需要生成模态对话框的web应用程序。alert，confirm和prompt太简单和丑陋，而模式窗口函数.这是一个很长的故事。我不能用它。因此，我将使用DOM函数和CSS创建模式框。但是，我需要将相当多的内容放到对话框中，我想知道这样做的最佳方法是什么。将HTML放入字符串并使用innerHTML是很困难的。我可以使用DOM，但这很烦人，编写代码需要花费太多时间。我知道我可以使用带有奇怪类型标记的脚本(类似于x-random/x-htmlstuff)，然后将其内容复制到innerHTML中，但是是否有更好、更“正式”的方法来做到这一点呢？

Answer 1

如果模型的布局是静态的，只需将它们放入页面的HTML中即可。当页面正常显示时，使用CSS将其设置为display: none。当您要显示模型时，请使用

document.getElementById('modal-id').style.display = 'block';

Answer 2

我听说有些人使用这个解决方案：

<script type="text/html" id="popup_html">
 html...
</script>

(当然，你应该让它看不见)

但是，最有可能的是，如果您试图从javascript中编写大量HTML，那么您应该重新跟踪并考虑是否有更好的方法。

1. 如果您多次使用相同的 div，您应该在HTML页面中创建它，并在需要时显示它
2. 如果您正在创建一个新元素--看看是否可以使用document.createElement和appendChild方法(假设不涉及很多节点)
3. 如果两者都不适用-回溯。对于大型项目，面向对象的javascript可能会有所帮助。

Answer 3

据我所知，没有什么神奇的方法。我通常只使用innerHTML并以良好的格式编写HTML，例如：

box.innerHTML = "<div id='boxChild'>\n" +
                "    <p>Put whatever content here</p>\n" +
                "</div>";

如果您查看您的代码，则\n将对其进行良好的格式化，并且一旦JS写入它，就不会有任何长字符串。