javascript - ES6：用于嵌套 html 标记的标记模板

Question

我正在学习 JavaScript 并尝试使用它的标记模板文字。

<p> Handlebars? Tagged template literals? <span> That is a question. </span> </p>

以上是HTML代码。我想用下面的代码实现类似的结果，但允许能够替换变量str和quote作为数组的可能性。

str = 'Handlebars? Tagged template literals?'
quote = 'That is a question.'

const renderMe = htmlString
`<p>
  ${str}
      <span>
        ${quote}
      </span>
</p>`

function htmlString(string, ...exp1) {
  return () => {
    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())

如您所见，我被困在返回阶段。那么可以做些什么来改进代码呢？

Answer 1

设置内容后，您只需附加span到:p

function htmlString(string, ...exp1) {
  return () => {
    const p = document.createElement("p")
    p.textContent = exp1[0]

    const span = document.createElement("span")
    span.textContent = exp1[1]

    p.appendChild(span)

    return p
  }
}

希望这可以帮助 ：）