title: How to apply style sheets to dynamically created elements?
body: <p>this should be an easy one: I have the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
   &lt;script type="text/javascript" src="js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          var table = document.createElement("table");
          table.setAttribute("id","table");
          var headRow = document.createElement("tr");
          var dataRow = document.createElement("tr");
          var head = document.createElement("th");
          var data = document.createElement("td");
          head.innerHTML="head";
          data.innerHTML="data";
          headRow.appendChild(head);
          dataRow.appendChild(data);
          table.appendChild(headRow);
          table.appendChild(dataRow);
          console.log(document.styleSheets);
          table.className = "table";
          document.getElementById("test").appendChild(table);
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="test"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is: The style specified in the bootstrap.min for the class "table" is never applied upon loading the side. Do I have to do something additionally? I test it in the most recent version of Safari.</p>
  
  <p>Any Help?</p>
  
  <p>Cheers Twerp</p>