title: Dynamically create html for jQuery tabs
body: <p>I'm trying to write a page while creating almost all of the html via javascript. I want to use jQuery Tabs in my project. The content gets created, but the tabs are not showing. Is this a CSS issue?</p>
  
  <pre><code>function buildDocument() {
  
      var tabsContainer = document.getElementById("tabs");
  
      tabsContainer.innerHTML = "";
  
      var uList = document.createElement("ul"); 
  
      var li1 = document.createElement("li");
      var li2 = document.createElement("li");
  
      li1.innerHTML = '&lt;a href="#tabs-1"&gt;One&lt;/a&gt;';
      li2.innerHTML = '&lt;a href="#tabs-2"&gt;One&lt;/a&gt;';
  
      uList.appendChild(li1);
      uList.appendChild(li2);
  
      var t1 = document.createElement("div");
      var t2 = document.createElement("div");
  
      t1.id = "tabs-1";
      t2.id = "tabs-2";
  
      t1.innerHTML = "Tab1";
      t2.innerHTML = "Tab2";
  
      tabsContainer.appendChild(uList);
      tabsContainer.appendChild(t1);
      tabsContainer.appendChild(t2);
  
      $( "#tabs" ).tabs();
  }
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="main.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="external/jquery/jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="jquery-ui.js"&gt;&lt;/script&gt;
          &lt;link href="jquery-ui.css" rel="stylesheet" type="text/css" media="screen" /&gt;
      &lt;/head&gt;
      &lt;body onload="buildDocument();"&gt;
          &lt;div id="tabs"&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The jQuery files I've downloaded from their website here (everything as default):
  <a href="http://jqueryui.com/download/" rel="nofollow">http://jqueryui.com/download/</a></p>
  
  <p><a href="http://i.stack.imgur.com/ILeEX.png" rel="nofollow">This is what I get</a></p>