title: Create HTML from JavaScript for each element
body: <p>I've run into a problem and I'm pretty sure the only way to fix it requires JavaScript. I'm not that good at JavaScript; that is why I'm asking for your help.</p>
  <p>How can I write content to a <code>div</code> based on HTML code that already has been written?</p>
  <hr />
  <h2>Example</h2>
  <p>Dynamic HTML created by JavaScript based on the '<strong>Static HTML</strong>' with a selector called <code>data-dynamic-content='yes'</code></p>
  <p><strong>Created by JavaScript:</strong></p>
  <pre><code>&lt;ul&gt;
     &lt;li&gt;&lt;a href=&quot;#a&quot; class=&quot;hvr-bubble-right&quot;&gt;Webpage settings&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=&quot;#b&quot; class=&quot;hvr-bubble-right&quot;&gt;Block 1&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=&quot;#c&quot; class=&quot;hvr-bubble-right&quot;&gt;Block 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p><strong>Static HTML:</strong></p>
  <pre><code>&lt;div id=&quot;a&quot; data-dynamic-content='yes' class='hidden' data-name='Webpage settings'&gt;
     &lt;!-- content --&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;b&quot; data-dynamic-content='yes' class='hidden' data-name='Block 1'&gt;
     &lt;!-- content --&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;c&quot; data-dynamic-content='yes' class='hidden' data-name='Block 2'&gt;
     &lt;!-- content --&gt;
  &lt;/div&gt;
  </code></pre>