title: Create div element and dynamically add child elements on it
body: <p>How do I create an element in javascript and dynamically add elements on it?</p>
  
  <p>If I have this created element on HTML and dynamically append elements on it, it works just fine.</p>
  
  <pre><code>&lt;!-- THIS WILL WORK --&gt;
  &lt;div id="wrapper"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But this will not work:</p>
  
  <pre><code>// THIS WILL NOT WORK
  var container = document.createElement('div');
  container.id = "wrapper";
  </code></pre>
  
  <p>Additional code:</p>
  
  <pre><code>var html = '&lt;div&gt;&lt;ul&gt;';
  
  for(var i=1; i&lt;=40; i++){
      html+= "&lt;li&gt;Testing: "+i+"&lt;/li&gt;";
  }
  
  html+= '&lt;/ul&gt;&lt;/div&gt;';
  
  $('#wrapper').append(html);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/jQx22/1/" rel="noreferrer">Fiddle</a></p>