title: Import CSS styles from HTML snippet
body: <p>I'm playing around with dynamically loaded HTML content on a webpage I am building. What I want is to have a list of HTML files with snippets that will be dynamically imported into my webpage using javascript/jquery and an ajax request. This would allow me to e.g. store several blog posts as separate files and dynamically build a page with multiple posts on it.</p>
  
  <p>Below is an example snippet with just a title and a small table:</p>
  
  <p>CSS :</p>
  
  <pre><code>#swimTimes2{
      background-color: #eee;
  }
  </code></pre>
  
  <p>HTML SOURCE :</p>
  
  <pre><code>&lt;div id="itemContainer"&gt;
      &lt;div id='swimTimes2' class='item'&gt;
          &lt;h1&gt; Swim Times &lt;/h1&gt;
          &lt;table&gt;
              &lt;tr class="tableHead"&gt;
                  &lt;td&gt;Weekdays&lt;/td&gt;&lt;td&gt;Weekends&lt;/td&gt;&lt;td&gt;Holidays&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;7:00am-9:00am&lt;/td&gt;&lt;td&gt;10:30am-8:00pm&lt;/td&gt;&lt;td&gt;11:00am-4:00pm&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;11:00am-2:00pm&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;4:00pm-10:30pm&lt;/td&gt;&lt;/tr&gt;
  
          &lt;/table&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I figured out that by using <code>$.get()</code> I can load the contents of my snippet file above and then use jquery to search through it for the html snippet I want, in this case the contents of #itemContainer.</p>
  
  <p>JAVASCRIPT </p>
  
  <pre><code>$(document).ready( function(){
      loadContent('content/content_1.html');
  });
  
  
  function loadContent(fileName){
  
      $.get(fileName, function(data){
  
          var htmlContents = $(data).find("#itemContainer").children('.item').html();
          var id = $(data).find("#itemContainer").children('.item').attr('id');
          $('#content').append($('&lt;div class="item" /&gt;').attr('id', id).html(htmlContents));
  
          var styleEl = $(data).find("style");
          $('head').append(styleEl);
  
      });
  }
  </code></pre>
  
  <p>So the first 3 lines of my <code>$.get()</code> handler function work - I am able to import the snippet and put it up on my html page. Now I want to import also the css styles from the snippet into my main page - in this example I gave my item a grey background, a property that it wouldn't get from my main html page.</p>
  
  <p>The issue I have is that although I know the style element from my snippet is being imported into my main page, the css rules it contains are not applied to the imported html. What am I missing?</p>