title: Load CSS file only if element with class is present on the page
body: <p>I am trying to optimise my loading of CSSS files as I am loading some large CSS files on pages where they aren't used. Is there any way for me to enqueue them only if an element is present with a class on that page.</p>
  
  <p>I've tried the following however, it does not work:</p>
  
  <pre><code>jQuery(document).ready(function($) {
      //Script Checkers
      var wowJS = $('.wow');
  
      if (wowJS.length &gt; 0) {
          $.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js', function() {
              new WOW().init();
          });
  
          var head = document.getElementsByTagName('head')[0];
          var cssNode = document.createTextNode("link");
  
          cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
          cssNode.rel = "stylesheet";
          //console.log("CSS Node: "+cssNode); = [object Text]
  
          head.appendChild(cssNode);
      }
  });
  </code></pre>
  
  <p>I have seen functions that work for adding css files to the head however, none of them allow the ability to make it conditional.</p>
  
  <p><strong>EDIT: I've since just used the getScripts() jQuery function however, I am still in need of knowing how to add css to the header only if required.</strong></p>
  
  <p><strong>EDIT: For future reference for anyone, this is the final working code:</strong></p>
  
  <pre><code>jQuery(document).ready(function($) {
      //Script Checkers
      var wowJS = $('.wow');
  
      if (wowJS.length &gt; 0) {
          $.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js', function() {
              new WOW().init();
          });
  
          var head = document.getElementsByTagName('head')[0];
          var cssNode = document.createElement("link");
  
          cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
          cssNode.rel = "stylesheet";
  
          head.appendChild(cssNode);
      }
  });
  </code></pre>