title: How to append/remove elements on resize without duplicating them
body: <p><strong>UPDATE</strong> This is why I am not using media queries: The site is a parallax site which has about 60-70 individual images that animate within each div. Originally I coded the site using straight media queries but that ended up not working because the site would load extremely slow on 3G connection. Now what I am doing is I have created 5 screenshots with all of the elements in their final positions and I am setting those as the background images for the divs by default. Then if it is detected that the screen width is above 1100px(assuming faster internet connection) it will remove the background images and append all of the individual assets within the divs. (let me know if there is a better way to accomplish this).</p>
  
  <p>I have a parallax site which is using jQuery to append elements into the slide divs if the browser width is 1100px or greater and another function to empty those divs if the window is resized smaller than 1100px. I am trying to set this up so that the elements will append and empty automatically as the browser is resized. Here is an example of the append function:</p>
  
  <pre><code>function appendElements() {
      //swap in desktop content
      if (window.matchMedia("(min-width: 1100px)").matches) {
      jQuery("#bg_container").append("\
          &lt;div id='BG' class='bg_images' data-stellar-ratio='.5'&gt;\
              &lt;img src='img/bg/bg1.png'/&gt;\
          &lt;/div&gt;\
      ");
  }
  appendElements();
  </code></pre>
  
  <p>And here is an example of the empty function:</p>
  
  <pre><code>function emptyContainers() {
      if (window.matchMedia("(max-width: 1099px)").matches) {
          jQuery("#bg_container").empty();
      }   
  }
  </code></pre>
  
  <p>I added the emptyContainers function to a resize event:</p>
  
  <pre><code>jQuery(window).resize(function(){
      emptyContainers();   
  });
  </code></pre>
  
  <p>This works as it should, if I start out with my browser at a width of 1100+ px, it correctly shows the appended assets and then if I resize the browser below 1100 it removes the assets from the containers. The problem is going back the other way. If I try to resize from below 1100 back up to above 1100 the elements are not re-appended.</p>
  
  <p>I tried adding the appendElements function to the resize event as well, but this caused all of the elements to duplicate so that there were multiple instances of each element on the page.</p>
  
  <p>Any ideas? Thanks in advance!</p>