I use a fetch statement to retrieve my HTML footer and include it on every page but the Date().getFullYear script in the footer never gets executed

Question

My HTML pages dynamically load my header menu and page footer using the following method.

# in my page-includes.js file

fetch("nav-menu.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("nav").innerHTML = data;
  });

fetch("footer.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("footer").innerHTML = data;
  })

# code i tried at the bottom of my main page

    <script>
        
      document.getElementsByClassName("copyright-year")[0].innerHTML = "28 BC";
      var spanTags = document.getElementsByClassName("copyright-year");
      spanTags[0].text("13 BC");
      spanTags[1].innetHTML = "28 BC";
      setYear();

      function setYear(){
        if (document.readyState === 'interactive') {
          let curYr = new Date().getFullYear();
          for (i=0; i<span.length; i++) {
             spanTags[i].innerHTML = curYr;
          }
      }
      
    /* though I really don't know JQuery I tried this first */
    /* $(".copyright-year").text(new Date().getFullYear()); */
    
    </script>

<mainpage>
    <nav class="navbar" id="sectionsNav">
    </nav>  

    <footer class="footer footer-default">
    </footer>
</mainpage>

<included-footer-html>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="copyright float-left">
                &copy;
                <span class="copyright-year">
                    <script defer>document.write(new Date().getFullYear());</script>
                </span>
                &nbsp;Kopacz, LLC
            </div>
            <div class="float-right">
                All Rights Reserved
                <sub><i class="material-icons">public</i></sub> Worldwide
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="copyright float-none">
                Astronomy Photographs &copy;
                <span class="copyright-year">
                    <script defer>document.write(new Date().getFullYear());</script>
                </span>
                &nbsp;David Kopacz
            </div>
        </div>
    </div>
</div>
</included-footer-html>

The problem is that whether I include the date function in the footer.html that is loaded by included.js or I simply embed a simple span tag and then try to modify it's text after the page loads, the date never gets placed on the page.

If I copy and paste the footer HTML with the script onto the bottom of any web page, the year is displayed perfectly, but when included via this Fetch function, nothing is displayed.

What is most interested to note is the fact that when I view the source of any web page on my site, I only see the tags that Fetch uses to locate and place the nav and footer HTML. The actual nav menu and footer HTML never appear in the source, only their container tags and .

The included HTML can be seen using Inspect in the browser.

So, how do I access these "semi-hidden" HTML elements and script in my date function?

Answer 1

Here's something I whipped up a few years ago that will execute scripts in dynamically loaded HTML

The trick is to duplicate the script tags in code and replace them in-place - et voila - the scripts run

const loadHtml = ((text, dest, replace = false) => {
    if (typeof dest == 'string') {
        dest = document.querySelector(dest);
    }
    const p = new DOMParser();
    const doc = p.parseFromString(text, 'text/html');
    const frag = document.createDocumentFragment();
    while (doc.body.firstChild) {
        frag.appendChild(doc.body.firstChild);
    }
    // handle script tags
    const ret = Promise.all(Array.from(frag.querySelectorAll('script'), script => new Promise(resolve => {
        const scriptParent = script.parentNode || frag;
        const newScript = document.createElement('script');
        if (script.src) {
            newScript.addEventListener('load', e => resolve({ src: script.src, loaded: true }));
            newScript.addEventListener('error', e => resolve({ src: script.src, loaded: false}));
            newScript.src = script.src;
        } else {
            newScript.textContent = script.textContent;
            resolve({ src: false, loaded: true });
        }
        scriptParent.replaceChild(newScript, script);
    })));
    if (replace) {
        dest.innerHTML = '';
    }
    dest.appendChild(frag);
    return ret;
});

Use it in your code like

fetch("footer.html")
.then(response => response.text())
.then(data => loadHtml(data, "footer"))
// this last line isn't really needed, just logs failed scripts
.then(r => r.filter(({loaded}) => !loaded).forEach(({src}) => console.log(`failed to load ${src}`));

However ... your use of document.write will result in unexpected side effects as mentioned in a comment - do not use document.write use DOM manipulation

e.g.

<div class="copyright float-left">
    &copy;
    <span class="copyright-year">
      <script>
        var span = document.createElement('span');
        span.innerHTML = new Date().getFullYear();
        document.querySelector(".copyright-year").appendChild(span);
      </script>
    </span>
  </div>