javascript - 在 HTML/JavaScript 中部分渲染

Question

我有一些 HTML 文件，我想在另一个 HTML 文件中部分呈现每个文件，例如 header.html 和 footer.html 以便遵守 DRY 概念。

HTML 文件应如下所示:

<!--render header.html-->
<div>
    Content
</div>
<!--render footer.html-->

我该怎么做？

Answer 1

如果您只是使用纯 HTML 和 Javascript，您可以包含 jQuery 并使用 AJAX 请求在您的主页中加载另一个 HTML 页面的内容。

在这里查看 jQuery 的“load()”函数:

http://api.jquery.com/load/

假设您有以下 html:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

你的用法看起来像这样:

$('#header').load('header.html');
$('#footer').load('footer.html');