在Javascript中包含HTML文件

我知道这是一个已解决的问题，这个问题可能听起来很愚蠢，但我的背景大多是后端、移动和低级开发

我正在开发一个JS应用程序（纯JS，没有框架，但结构非常好）。应用程序的唯一问题是所有HTML都是用Javascript编写的。所以它看起来像：

$div = ('<div>Hello</div>');

$div=（'Hello'）；

然后你可以想象所有的添加和HTML操作会让这变得多么丑陋。现在这个HTML最终被包含到一个index.HTML文件中，这个文件有一个标准的布局，所有其他JS文件最终都会以某种方式将它们的HTML导出到其中（使用一些PHP）。我希望能够创建一个单独的HTML文件，并让一个JS文件使用该文件。我怎样才能做到？我知道问题通常是相反的：在HTML中，获取JS/模板。但在这个应用程序中，这不是问题所在

在我目前的应用程序中，有没有一种方法可以使用手柄、下划线或任何类似的东西，将HTML写入HTML文件并将其包含到Javascript中？我知道这可能需要一些预编译，但这不是问题

下划线和把手上的示例仅显示了按照上面的方式编写的简单HTML示例。在线示例展示了如何使用Javascript为HTML模板，但并不是我想要的

---

任何人都有任何建议或可以提供帮助吗？

我认为您可以使用JQuery的$.ajax（）方法轻松做到这一点。这是一个exmaple：

$.ajax({
    type: "GET",
    url: "/templates/something.html",
    dataType: "xml",
    success: function (xml) {
        $div = xml;
        console.log('Loaded HTML: ', xml);
    }
});

---

车把将为您的工作尝试，它的超级简单的使用

让我们举一个简单的例子（摘自Handlebar网站）。假设这是您的HTML：

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

然后，您可以从Javascript创建一个模板：

var source   = $("#html-template").html();
var template = Handlebars.compile(source);

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

然后根据模板生成HTML：

var source   = $("#html-template").html();
var template = Handlebars.compile(source);

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

此时

html

将：

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

我的新职位
这是我的第一篇帖子！

您可以像使用任何其他html字符串一样使用它（例如：

$（html）.appendTo（'body'）

）

您可以根据需要制作任意多个把手模板，大小从完整页面到上面的小片段不等

---

如果性能成为一个问题，您也可以研究预编译：

您可以使用。@false:“解析器在页面加载期间确实处理元素的内容以确保其有效。”这使得

对于许多模板任务毫无用处，没有问题。中引用的

#条目模板

在哪里？还是你的意思是剧本的id？另外，HTML不需要以某种方式包含吗？或者它真的读取文件并抓取它？JS如何知道如何获取

html.handlebar

文件？我在

#输入模板

上的错误。没错，应该是

#html模板

。这就是我复制/粘贴的结果。至于查找文件，您可以将其放入提供的HTML中，也可以使用JQuery动态创建

脚本
标记。例如：
$（'body'）。附加（'''）
。然后浏览器将从服务器加载文件。非常感谢。我不能用HTML动态地提供它，这就是问题所在。我在javascript的末尾添加了这个body append，但没有成功。有什么想法吗？我唯一能想到的是Javascript在加载文件之前引用了该文件。您可能想看看异步javascript加载程序，如。诚然，我从未使用过它，但它似乎很简单：
$script（'html.handlebar'，function（）{/*执行模板化*/}）太棒了，谢谢。我还发现require.js文本模块也允许您这样做。这似乎是最好的方法，但似乎无法正常工作。它没有将xml转换为正确的jQuery元素。执行
$div=$（xml.documentElement）
会丢失样式。下面是一个JSFIDLE，解释了它的用法。希望它能有所帮助：请注意，我使用的是JSFIDLE的特性，它允许您向他们的服务器发送一个虚拟html并将其回显。这类似于从远程服务器读取HTML。它应该是HTML而不是xml类型。