Question

我正在尝试避免重复我的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>移到那里。

Answer 1

好吧，伙计们我终于用jquery来做这个了。我所做的不是加载内容部分，我实际上将静态部分移动到.html文件中，然后通过jquery加载它

$（function（）{

$（ “＃includedContent”）负载（ “navbar.html”）; };

我需要运行它的地方我添加如下

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

Answer 2

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

let content = document.documentElement;

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

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

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

2 个答案: