title: ES6: tagged templates for nested html tags
body: <p>I'm newly learning JavaScript and experimenting its tagged template literals. </p>
  
  <pre><code>&lt;p&gt; Handlebars? Tagged template literals? &lt;span&gt; That is a question. &lt;/span&gt; &lt;/p&gt;
  </code></pre>
  
  <p>Above is HTML code. I want to achieve with below code the similar outcome but allow the possibility that be able to replace the variables <code>str</code> and <code>quote</code> as arrays.</p>
  
  <pre><code>str = 'Handlebars? Tagged template literals?'
  quote = 'That is a question.'
  
  const renderMe = htmlString
  `&lt;p&gt;
    ${str}
        &lt;span&gt;
          ${quote}
        &lt;/span&gt;
  &lt;/p&gt;`
  
  function htmlString(string, ...exp1) {
    return () =&gt; {
      const p = document.createElement("p")
      p.textContent = exp1[0]
  
      const span = document.createElement("span")
      span.textContent = exp1[1]
  
      return p  //but how about span???
    }
  }
  
  document.body.appendChild(renderMe())
  </code></pre>
  
  <p>As you can see, I'm stuck at the return stage. So what can be done to improve the code?</p>