使用另一个 html 页面替换 html 页面的内容答案

【问题标题】：Replacing contents of html page using another html page使用另一个 html 页面替换 html 页面的内容
【发布时间】：2015-11-16 19:15:53
【问题描述】：

我试图避免我的 html 页面模板的标题、侧边栏信息重复。

所以，我正在考虑让用户 innerHTML 即时替换内容。但是，我不想将整个目标 html 放在 innerHTML 下的同一页面上，因为以后调试或维护将是一场噩梦。

那么，有没有办法在innerHtml 中指定另一个页面链接并将内容分开？

举个例子

<script type="text/javascript">
     function replacePage(page){
      var ele = document.getElementById('page-wrapper'); ele.innerHTML = "<div>hey vik</div>";
     }
    </script>

我正在寻找是否可以将 innerHTML 值指定为某个 .html 文件名并将 <div>hey vik</div> 移动到那里。

【问题讨论】：

这是garann.github.io/template-chooser的模板库
查看 Mustache.js ：github.com/janl/mustache.js
没有任何其他库等还不够简单？
这是开始使用服务器端代码的地方。你应该尝试任何不是 PHP 的东西。
您可以将所有“其他”html 值存储为 Javascript，或者您可以访问服务器端代码以获得答案。但与大多数在服务器端自行运行的东西一样，您只需注意安全性即可。

标签： javascript html innerhtml

【解决方案1】：

好吧，伙计们，我终于使用 jquery 来做到这一点。我所做的不是加载内容部分，而是将静态部分移动到 .html 文件中，然后通过 jquery 将其加载为

$(函数() {

$("#includedContent").load("navbar.html"); };

我需要整理的地方我添加如下

<div id="includedContent"></div>

【讨论】：

【解决方案2】：

您可以使用document.documentElement 选择文档的根元素并将其存储在变量中：

let content = document.documentElement;

然后使用innerHTML改变页面内容：

content.innerHTML = "<body><h1>text</h1><body>";

【讨论】：