Simple Double Fetch Script

On This Page

1. Introduction
2. Example 1
3. Summary
4. Bottom Navigation

Introduction

Example 1

<!-- ========== BOTTOM PAGE NAVIGATION HTML ========== -->
<div id="bottomnav-placeholder"></div>
</main>

<!-- ========== FOOTER HTML ========== -->
<div id="footer-placeholder"></div>

<!-- ========== JS FETCH SCRIPT ========== -->

<script>
fetch('/component/bottomnav.html')
  .then(response => response.text())
  .then(data => {
    document.getElementById('bottomnav-placeholder').innerHTML = data;
  });

fetch('/component/footer.html')
  .then(response => response.text())
  .then(data => {
    document.getElementById('footer-placeholder').innerHTML = data;

    const uploaded = document.body.dataset.uploaded;
    const updated = document.body.dataset.updated;

    const pageDates = document.getElementById('page-dates');

    if (pageDates) {
      pageDates.textContent = `Uploaded: ${uploaded} | Updated: ${updated}`;
    }
  });
</script>
</body>
</html>

Summary