从JavaScript输出HTML的推荐方法

我知道以前可能有人问过这个问题，但我有一个web应用程序需要生成模态对话框<代码>警报、

确认

和

提示

都太简单和难看了，而且模态窗口功能……说来话长。我不能用它。因此，我将使用DOM函数和CSS创建模式框。但是，我需要在对话框中添加很多内容，我想知道最好的方法是什么。将HTML放入字符串并使用

innerHTML

是很难处理的。我可以使用DOM，但这很烦人，而且需要花费太多的时间来编写代码。我知道我可以使用带有奇怪类型标记的脚本（类似于

x-random/x-htmlstuff

），然后将其内容复制到

innerHTML

，但是有没有更好、更“正式”的方法来实现这一点呢？

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

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

box.innerHTML=“\n”+
“将任何内容放在此处
\n”+
"";

---

如果你查看你的代码，它的格式会很好，一旦JS写了它，就不会有长字符串。

我建议用

innerHTML

加载它，或者使用

jQuery

来简化事情，但是如果你需要的话 一个模式窗口，您是否可以使用jQuery UI模式对话框，如图所示

如果您在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>

无论您做什么，都不要使用document.write（）

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

display:none

。如果要显示模型，请使用

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

---

一种方法是在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;
}

这是一个预生成的警报，id为：
这是另一个预生成的警报，id为：
...
.pop消息{
显示：无；
}

---

现在，当用户导航页面时，您将隐藏并显示

.pop消息

，同时替换那些

.dynamic字段

，如果需要的话。

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

partials/modal.html

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

---

如果您希望内容是动态的，请将

modal.html

作为模板，并使用JS模板库（例如），或者编写一个简单的RegExp替换您自己。

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

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

html。。。

（当然，你应该让它隐形）

但是，最有可能的情况是，如果您试图从javascript编写大量HTML，那么您应该回顾并思考是否有更好的方法

如果您多次使用相同的

div

，您应该在HTML页面中创建它，并在需要时显示它

如果要创建新元素，请查看是否可以使用

document.createElement

和

appendChild

方法（假设所涉及的节点不多）

如果两者都不适用-回溯。对于大型项目，面向对象的javascript可能会有所帮助

---

您是否在动态生成HTML？如果没有，您可以使用

display:none

将其放入原始HTML中。然后，当您想要显示对话框时，将其更改为

display:block

。那么，我应该这样做吗？最好使用

'

（空字符串）而不是

'block'

，以便显示的元素采用其或继承的样式（可能是“block”，但也可能是“inline block”，等等）。对不起，我没用jQuery@Markasoftware好的，我添加了几个非jQuery解决方案。这不是最容易的事，所以我不会接受。我在问题中说我不想这么做。有时候，如果你的内容是动态的，或者是最简单的方式，你没有选择。但是看起来你没有动态生成消息，所以你选择的解决方案肯定是最好的。有趣的想法，但我不希望用户必须等待请求完成，延迟modalIn。在这种情况下，你可以在页面加载时执行AJAX请求，在modal需要打开时，执行内容（或模板）将可用。我将对其进行投票，但我已经在问题中解释了我知道这一点，因此这里对我来说没有什么新鲜事。对此的改进是使用jQuery。问题没有提到jQuery，所以我在回答中没有假设。这只是一个建议；）我个人更喜欢jQuery，但是，如果这个问题不需要jQuery，我只会在原始JS解决方案过于复杂时才提出。其他答案已经建议使用jQuery，OP表示不能接受。最好使用

…style.display=''因此元素采用其默认或级联样式。
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()
}

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