title: How to style text inserted with innerHTML using JavaScript
body: <p>I have the following code for a header:</p>
  
  <pre><code>&lt;div id="title-text"&gt;
      The Cuttlefisher Paradise
  &lt;/div&gt;
  &lt;div id="choices"&gt;
      &lt;ul&gt;
          &lt;li id="home"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li id="contact"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li id="about"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;!-- 5 more items --&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want this to be the header about 10 different web pages. I cannot use <code>&lt;frame&gt;</code> or <code>&lt;iframe&gt;</code> for graphical reasons.</p>
  
  <p>For an example of what I want to do, I am currently using <code>document.getElementById("home").setAttribute("class", "active")</code> to style the active tab, but when the header (the block of code just above) is inserted into a div using <code>innerHTML</code>, <code>document.getElementById</code> does not work (returns null).</p>
  
  <p>What simple method is there to either put the header (without <code>&lt;frame&gt;</code> or <code>&lt;iframe&gt;</code>) on multiple pages or get <code>document.getElementById</code> to find ids inserted with <code>innerHTML</code>?</p>