title: Output JSON in javascript as a list without jquery
body: <p>I have a JSON object:</p>
  
  <pre><code>var txt = '{"employees":[' +
  '{"firstName":"John","lastName":"Doe","time":"9:15am","email":"john_doe@gmail.com" },' +
  '{"firstName":"Anna","lastName":"Smith","time":"9:15am","email":"anna@gmail.com" },' +
  '{"firstName":"Peter","lastName":"Jones" ,"time":"9:15am","email":"peter@gmail.com"}]}';
  </code></pre>
  
  <p>That I want to print as a list in between div statements:</p>
  
  <ul>
  <li>John Doe</li>
  <li>9:15am</li>
  <li><p>john_doe@gmail.com</p></li>
  <li><p>Anna Smith</p></li>
  <li>9:15am</li>
  <li><p>anna@gmail.com</p></li>
  <li><p>Peter Jones</p></li>
  <li>9:15am</li>
  <li>peter@gmail.com</li>
  </ul>
  
  <p>The HTML that I'm trying to populate looks like this:</p>
  
  <pre><code>    &lt;div class="info"&gt;
          &lt;ul&gt;
              &lt;li id="name"&gt;&lt;/li&gt;
              &lt;li id="time"&gt;&lt;/li&gt;
              &lt;li id="email"&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>How do I accomplish this?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;h2&gt;Create Object from JSON String&lt;/h2&gt;
  &lt;div id="output"&gt;
  
  &lt;/div&gt; 
  &lt;script type="text/javascript"&gt;
  var txt = '{"employees":[' +
  '{"firstName":"John","lastName":"Doe","time":"9:15am","email":"john_doe@gmail.com" },' +
  '{"firstName":"Anna","lastName":"Smith","time":"9:15am","email":"anna@gmail.com" },' +
  '{"firstName":"Peter","lastName":"Jones" ,"time":"9:15am","email":"peter@gmail.com"}]}';
  
  var employees=JSON.parse(txt).employees;
  var container=document.getElementById("output");
  
  for (i=0;i&lt;employees.length;i++) { //Loops for the length of the list
      var info=document.createElement('div');
      info.className='info'; //Creates a new &lt;div&gt; element and adds the class info to it
  
      var ul=document.createElement('div'); //Creates &lt;ul&gt; element
      info.appendChild(ul); //Adds the &lt;ul&gt; to the newly created &lt;div&gt;
  
      var name=document.createElement('li');
      name.className='name'; //Should use class, not id, as ID must be unique
      name.innerHTML=employees[i].firstName+' '+employees[i].lastName; //Adds name
      ul.appendChild(name);
  
      var time=document.createElement('li');
      time.className='time';
      time.innerHTML=employees[i].time;
      ul.appendChild(time);
  
      var email=document.createElement('li');
      email.className='email';
      email.innerHTML=employees[i].email;
      ul.appendChild(email);
  
      container.appendChild(info); //Adds the final generated HTML to the page
  
  } //Will repeat for each item in list.
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>