從 href 獲取 html 文件並使用 vanilla javascript 將其加載到頁面中

Question

假設我有這個菜單：

 <div class="dropdown-menu pull-left" aria- labelledby="dropdownMenuButton"> <a class="dropdown-item tuning-selection" id="guitar_standard" href="tunings/guitar_standard.html">Guitar(Standard)</a> <a class="dropdown-item tuning-selection" id="guitar_drop_d" href="tunings/guitar_drop_d.html">Guitar(Drop D) </a> <a class="dropdown-item tuning-selection" id="bass_standard" href="tunings/bass_standard.html">Bass Standard</a> <a class="dropdown-item tuning-selection" id="mandolin_standard" href="tunings/mandolin_standard.html">Mandolin</a> </div>

如何通過 Vanilla JS 將這些 HTML 文件加載到單獨的 div（不刷新頁面）中？ 我知道 jQuery 更容易，但我想學習如何使用 Vanilla JS 來做到這一點。

Answer 1

您可以使用rel屬性設置為"import" <link>元素在click document.body元素之前加載文檔片段，並將<div>內容設置為link.import #document克隆元素。

 <link rel="import" href="data:text/html,<div><h1>guitar standard</h1></div>" id="guitar_standard"> <div class="dropdown-menu pull-left" aria- labelledby="dropdownMenuButton"> <a class="dropdown-item tuning-selection" href="#guitar_standard">Guitar(Standard)</a> </div> <div id="content"></div> <script> const content = document.getElementById("content"); const links = document.links; const imports = document.querySelectorAll("link[rel=import]"); for (const link of links) { link.onclick = (e) => { e.preventDefault(); e.stopImmediatePropagation(); const clone = document.querySelector(e.target.hash).import .querySelector("div").cloneNode(true); content.appendChild(clone); } } </script>