title: I want to convert a html code to javascript
body: <p>can you guys help me out with a problem?</p>
  
  <p>I have this HTML code </p>
  
  <pre><code>&lt;div class="chatbox__body__message chatbox__body__message--left"&gt;
  
      &lt;div class="chatbox_timing"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt; 22/11/2018&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-clock-o"&gt;&lt;/i&gt; 7:00 PM&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;img src="https://www.gstatic.com/webp/gallery/2.jpg" alt="Picture"&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;div class="ul_section_full"&gt;
          &lt;ul class="ul_msg"&gt;
              &lt;li&gt;&lt;strong&gt;Person Name&lt;/strong&gt;&lt;/li&gt;
              &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And I do have a database with date,image,name and message, but I need to convert this HTML to some JavaScript, I mean something like this</p>
  
  <pre><code>if(data.length) {
      for(var x = 0; x &lt; data.length; x++)
      {
          console.log(data[x]);
          var message = document.createElement('div');
          message.setAttribute('class','chat-messages');
  
          message.textContent = data[x].nickname+": "+data[x].message;
          messages.appendChild(message);
          messages.insertBefore(message,messages.firstChild);
      }
  }
  </code></pre>
  
  <p>But I don't really know how to convert it, to specify it's a chat box, and there will be a lot of 'boxes' can you help me out to convert that?</p>