title: How can I append HTML code using JavaScript?
body: <p>I'm trying to add an element to the DOM using JavaScript. I have a <code>ul</code> and I want to add a <code>li</code>. Its nothing difficult using <code>appendChild</code> but I want my <code>li</code> to be more complicated. </p>
  
  <p>This is the output that I'm trying to achieve: </p>
  
  <pre><code>&lt;li&gt;
    &lt;span class="author"&gt;Me&lt;/span&gt;
    &lt;span class="message"&gt;Message...&lt;/span&gt;
    &lt;span class="time"&gt;
      &lt;div class="line"&gt;&lt;/div&gt;
      15:21
    &lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <pre><code>let author = "me";
  let message = "Message...";
  let time = "15:21";
  </code></pre>
  
  <p>As you can see what I'm trying to achieve isn't just a basic <code>li</code> with some text (innerHTML) but quite a big chunk of HTML code.</p>
  
  <p>My question is how I can achieve to get this output using JavaScript. Or should I use some JavaScript library or something to make it easier?</p>