从 JavaScript 输出 HTML 的推荐方法答案

【问题标题】：reccommended way to output HTML from JavaScript从 JavaScript 输出 HTML 的推荐方法
【发布时间】：2014-01-13 02:16:12
【问题描述】：

我知道这可能以前被问过，但这里是：我有一个需要生成模式对话框的 Web 应用程序。 alert、confirm、prompt 太简单丑陋了，还有那个模态窗口功能……说来话长。我不能用它。因此，我将使用 DOM 函数和 CSS 创建模态框。但是，我需要在对话框中添加很多内容，我想知道最好的方法是什么。将 HTML 放入字符串并使用 innerHTML 是不实用的。我可以使用 DOM，但这很烦人并且需要花费太多时间来编写代码。我知道我可以使用带有奇怪类型标签的脚本（类似于x-random/x-htmlstuff），然后将其内容复制到innerHTML，但有没有更好、更“官方”的方式来做到这一点？

【问题讨论】：

您是动态生成 HTML 吗？如果没有，您可以将其放入原始 HTML 中，使用 display: none。然后在要显示对话框时将其更改为display: block。
那我应该怎么做？
最好使用''（空字符串）而不是'block'，以便显示的元素采用它们的default或继承样式（可能是'块'，但也可能是'内联-块'等）。

标签： javascript html dom innerhtml

【解决方案1】：

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

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

【讨论】：

对此的改进是使用 jQuery$('#modal-id').show() //.hide() to hide the modal
问题没有说jQuery，所以我没有在答案中假设它。
这只是一个建议；）
我个人更喜欢 jQuery，但如果问题不要求 jQuery，我只会在原始 JS 解决方案过于复杂时才建议使用它。其他答案已经建议使用 jQuery，并且 OP 说它们是不可接受的。
最好使用...style.display = '';，以便元素采用它们的默认或级联样式。

【解决方案2】：

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

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

（当然，你应该让它不可见）

但是，很可能，如果您尝试从 javascript 编写大量 HTML，那么您应该回溯并考虑是否有更好的方法。

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

【讨论】：

我会投赞成票，但我已经在问题中解释过我知道这一点，所以这里对我来说没有什么新鲜事

【解决方案3】：

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

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

\n 使得如果你查看你的代码，它将被很好地格式化，并且一旦 JS 写入它就没有一个长字符串。

【讨论】：

有趣。这不是最简单的事情，所以我不会接受它。我在问题中说过我不想这样做
很公平。如果您的内容是动态的，或者这是最简单的方式，有时您别无选择。但是看起来您并没有动态生成消息，因此您选择的解决方案绝对是最好的。

【解决方案4】：

一种方法是在 html 中生成弹出窗口，并在需要时显示或隐藏它们，如下所示：

<div class="myPopup">
    <div class="pop-message msg-01">This a pre generated alert with the id: <span class="dynamic-field-01"></span></div>
    <div class="pop-message msg-02">This another pre generated alert with the id: <span class="dynamic-field-02"></span></div>
    <div class="pop-message msg-03">...</div>
</div>

.pop-message {
    display: none;
}

现在，当用户浏览页面时，您将隐藏和显示.pop-message，同时根据需要替换那些.dynamic-field。

【讨论】：

【解决方案5】：

我建议将模态内容的 HTML 放在单独的文件中，然后在需要时异步加载它以弹出模态。

partials/modal.html

<div class="content">My modal content</div>

main.js

var modalContent = null;

function _fillModal() {
    modal.innerHTML = modalContent;  // something like this
}

function openModal() {
    if (!modalContent) {
        // XMLHttpRequest, which populates the modalContent variable
        // and in the callback, calls _fillModal()
    }

    // If already filled, just call
    _fillModal()
}

如果你希望内容是动态的，将modal.html做一个模板，并使用一个JS模板库（例如http://underscorejs.org/#template），或者自己写一个简单的RegExp替换。

【讨论】：

有趣的想法，但我不希望用户必须等待请求完成，从而延迟模态
在这种情况下，您可以在页面加载时执行 AJAX 请求，到模态需要打开时，内容（或模板）将可用。

【解决方案6】：

我建议使用 innerHTML 加载它或使用 jQuery 来简化事情，但如果你需要一个模态窗口，你能使用 jQuery UI 模态对话框吗，显示为here？

如果您在 HTML 中的 div 中加载了内容，并让它们具有 css display:none;，然后显示它们

document.getElementById("unshown-div").style.display="block";

如果你可以使用 jQuery，一个模态框可以用

<div id="modal" style="display:hidden">
    Here is a modal dialog bbox
</div>

和你的脚本：

$("#dialog").dialog();

无论你做什么，都不要使用document.write()

【讨论】：

对不起，我没有使用 jQuery
@Markasoftware 好的，我添加了几个非 jQuery 解决方案