ES6：用于嵌套 html 标记的标记模板答案

【问题标题】：ES6: tagged templates for nested html tagsES6：用于嵌套 html 标记的标记模板
【发布时间】：2017-03-06 11:17:21
【问题描述】：

我刚开始学习 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())

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

【问题讨论】：

您似乎完全忽略了模板文字中使用的 HTML 元素。 IE。如果模板文字不包含 <p> 或 <span> 怎么办？
@FelixKling 我之前尝试使用 ${p} 但失败了.....因为这里的 htmlString 函数不接受我在 document.createElement() 中放入参数。但这可能是可以解决的，只是我还不擅长编码，哈哈。还是我误解了你的问题？

标签： javascript html tagged-templates

【解决方案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
  }
}

希望这会有所帮助:)

【讨论】：