title: JS and HTML different Footer Render
body: <p>I am creating a JQuery Mobile site, that uses Javascript to inject a footer (the code below just shows the final HTML that is injected into the HTML div, not the process of creating the HTML).</p>
  
  <p>The problem that I am experiencing, is when I add the HTML by placing the code in the HTML <code>div</code>, the JQuery Mobile footer renders correctly, however, if I load the footer using Javascript's <code>innerHTML</code> variable, it becomes distorted. Any ideas why this happens?</p>
  
  <p>Finalized Footer HTML:</p>
  
  <pre><code>&lt;footer data-role="footer" data-id="navFooter" data-position="fixed"&gt;
      &lt;nav data-role="navbar" class="nav-footer"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="" id="LandmarksTab" class="ui-btn-active ui-state-persist" data-icon="custom"&gt;Landmarks&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="" id="MoreTab" data-icon="custom"&gt;More&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>Sample Code:</p>
  
  <p>Footer Placed via Javascript: <a href="http://jsfiddle.net/jakechasan/42kN6/" rel="nofollow">http://jsfiddle.net/jakechasan/42kN6/</a></p>
  
  <p>Footer Placed via HTML: <a href="http://jsfiddle.net/jakechasan/7Xu7b/1/" rel="nofollow">http://jsfiddle.net/jakechasan/7Xu7b/1/</a></p>