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())

如您所见，我卡在了 return 阶段。那么可以做些什么来改进代码呢？

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
  }
}

希望对您有所帮助:)

ES6：嵌套 html 标签的标签模板

ES6: tagged templates for nested html tags

html

javascript

tagged-templates