用 VanillaJS 而不是 jQuery 将 div 替换为另一个 html 文件（'common/...html）的内容

Question

我希望能够编写以下内容，而无需导入 jQuery 库，以便将 div 替换为另一个 html 文件中编写的组件的内容：

 <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <script> $.get("common/navbar.html", function(data) { $("#navbar-placeholder").replaceWith(data); }); </script> <div id="navbar-placeholder"></div> </body>

很乐意提出建议

Answer 1

您可以像下面那样做，您可能需要根据您的要求进行更改。

fetch('common/navbar.html')
  .then(response => {
     var el = document.getElementById('navbar-placeholder');
     el.insertAdjacentHTML('afterbegin', response);
  })

这里的response需要是 HTML。

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Answer 2

我尝试了Gowtham Raj J建议的fetch ，但它没有立即工作。 但是第二个.then在第一个响应之后链接它运行良好：

fetch('common/navbar.html')
    .then(res => {
      return res.text();
    })
    .then(cont => {
      var navPlaceholder = document.getElementById('navbar-placeholder');
      navPlaceholder.insertAdjacentHTML('afterbegin', cont);
    });

用 VanillaJS 而不是 jQuery 将 div 替换为另一个 html 文件（'common/...html）的内容

问题描述

2 个解决方案

解决方案1
1 2021-03-24 19:35:05

解决方案2
0 已采纳 2021-03-30 13:10:40

用 VanillaJS 而不是 jQuery 将 div 替换为另一个 html 文件（'common/...html）的内容

问题描述

2 个解决方案

解决方案1 1 2021-03-24 19:35:05

解决方案2 0 已采纳 2021-03-30 13:10:40

解决方案1
1 2021-03-24 19:35:05

解决方案2
0 已采纳 2021-03-30 13:10:40