将HTML放入Javascript源代码还是使用AJAX检索HTML？

我的应用程序有一些消息框，比如Facebook上的消息框，我制作的这些消息框工作得很好，但我开始不喜欢我实现消息框某些部分的方式

每个消息框都有一个标题栏，标题栏中有一个标题和一个可选的“X”按钮来关闭该框。每次创建一个框时，每个框都有一个默认的框体（

消息元素和一个关闭按钮），但您可以将任何HTML放入框体，这就是我的不确定性所在

在我的登录页面上，如果您忘记了密码并单击“忘记密码？”文本，则会出现一个消息框，框体是自定义HTML（电子邮件地址和提交按钮的输入字段），并且在我创建框时，该HTML是从Javascript源获取的

例如：

....
....
var bodyHTML = 'Custom HTML for the body of this box';
var options = {'title': 'Password Recovery', 'bodyHTML': bodyHTML, 'hideBigCloseButton': true, 'removeOnClose': true};
createMessageBox('password-recovery-box', options, callback);

在这个应用程序结束时，我肯定会得到至少7或8个消息框，其中框体有自定义HTML，可能只有10行HTML，也可能有50行，我不喜欢Javascript文件源中分散了这么多HTML

我在考虑使用jQuery向应用程序（site.com/ajax/load-box-template/recover-password）中的控制器发送GET请求，这将返回HTML以放入自定义消息框的主体中

后一种方法是矫枉过正还是优于前一种方法？两种方法都可以，但哪种方法更好？或者也许有比我提到的两种方法更好的方法

任何帮助都将非常感谢。

您可以使用$.load（）函数从消息框加载包含HTML的外部页面： 可以在js中使用后，将HTML放在隐藏的div中：

例如： HTML>

希望这有帮助

---

Pablo。

你可能想了解一下。我绝对不会在javascript中包含html。在此之前，我会将它直接包含在css隐藏的页面中。模板系统可能会更好。即使使用ajax请求也会更好，只要你缓存了结果，并且没有两次请求相同的模板。我会将演示内容保留在HTML/CSS中，然后从那里提取，并在需要时使用JS使其可见。我在模板上使用Pointy-无论是在页面中还是通过ajax提取。好的，谢谢，我将对此进行研究。

<div id="somediv" style="display: none">

$('#somediv').load('someExternalHTML.html', function() {
    var options = {'title': 'Password Recovery', 'bodyHTML': $('#somediv').html(), 'hideBigCloseButton': true, 'removeOnClose': true};
createMessageBox('password-recovery-box', options, callback);
});