title: How to use Fetch API to retrieve a different html file, based on screen size, and display it in a div
body: <p>I'm optimizing my site for load speed and I'm trying to display two different image galleries: SwiperJS for mobile devices, and DriftJS for desktop devices.</p>
  <p>The catch is these libraries are heavy and I don't want to load one if its not needed (driftJS on a mobile device or SwiperJS on a desktop) meaning that having both in the HTML file and using display: none; to hide the one that's not needed, is out of the question</p>
  <p>I have a div</p>
  <pre><code>  &lt;div id=&quot;productImage&quot;&gt;
    &lt;/div&gt;  
  
  </code></pre>
  <p>The goal is to change the item that productImage div displays based on screen size - so that it will display swiper.html photo gallery if the screen size is less then 800 pixels and display the drift.html photo gallery if the screen size is above 800 pixels.</p>
  <p>I would prefer it swap between as the screen resizes to make sure its responsive, but beggers cant be choosers and whats really importiant is that it loads the correct image gallery on the correct screen size.</p>
  <p><strong>Things that I've Tried:</strong></p>
  <p>From</p>
  <p><a href="https://stackoverflow.com/questions/60557498/how-to-fetch-a-particular-div-from-one-html-file-and-place-it-in-other-html-file">How to fetch a particular div from one html file and place it in other html file using normal JavaScript?</a></p>
  <p>I've tried using</p>
  <pre><code>ar imageBox = document.getElementById(&quot;product-image&quot;)
  .forEach.call(document.imageBox), function(imageBox) {
      if (window.innerWidth &lt; 800 ) {
                var driftLink = document.createElement('htmlRef'); 
                driftLink.rel = 'import';   
                driftLink.href = 'drift.html';  
                imageBox.appendChild(driftLink);  
   }
        else {
           var swiperLink = document.createElement('htmlRef'); 
                swiperLink.rel = 'import';   
                swiperLink.href = 'swiper.html';  
                imageBox.appendChild(swiperLink);
        }
    });
  
  </code></pre>
  <p>but html imports are depreciated and don't work anymore as of February 2020</p>
  <p>I've also tried</p>
  <pre><code> var imageBox = document.getElementById(&quot;product-image&quot;)
  .forEach.call(document.imageBox), function(imageBox) {
      if (window.innerWidth &lt; 800 ) {
          fetch(&quot;driftbox.html&quot;)
           .then(response =&gt; response.text())  
           .then(html =&gt; {
           imageBox.innerHTML = html;
           console.log(html);
           })
  .catch((err) =&gt; console.log(&quot;Can’t access &quot; + url + &quot; response. Blocked by browser?&quot; + err));
        }
        else {
          fetch(&quot;swiper.html&quot;)
          .then(response =&gt; response.text())  
          .then(html =&gt; {
          imageBox.innerHTML = html;
          console.log(html);
          })
  .catch((err) =&gt; console.log(&quot;Can’t access &quot; + url + &quot; response. Blocked by browser?&quot; + err));
        }
    });
    
  
  </code></pre>
  <p>And for debugging sake I tried it using XML (despite also being depreciated) but no avail.</p>
  <pre><code>var imageBox = document.getElementById(&quot;product-image&quot;)
  .forEach.call(document.imageBox), function(imageBox) {
      if (window.innerWidth &lt; 800 ) {
              if (!window.XMLHttpRequest &amp;&amp; 'ActiveXObject' in window) {
               window.XMLHttpRequest= function() {
               return new ActiveXObject('MSXML2.XMLHttp');
               };
               }
               var xhr= new XMLHttpRequest();
               xhr.open('GET', 'drift.html', true);
               xhr.onreadystatechange= function() {
               if (this.readyState!==4) return;
               if (this.status!==200) return;
               imageBox.innerHTML= this.responseText;
               };
               xhr.send(); }
        else {
          
               if (!window.XMLHttpRequest &amp;&amp; 'ActiveXObject' in window) {
               window.XMLHttpRequest= function() {
               return new ActiveXObject('MSXML2.XMLHttp');
               };
               }
               var xhr= new XMLHttpRequest();
               xhr.open('GET', 'swiper.html', true);
               xhr.onreadystatechange= function() {
               if (this.readyState!==4) return;
               if (this.status!==200) return; // or whatever error handling you want
               imageBox.innerHTML= this.responseText;
               };
               xhr.send();
        }
    });
  
    
  </code></pre>
  <p>From my understanding I should be using an eventListener to gauge the screen width and Fetch API to retrieve either HTML file but I'm not entirely sure.</p>