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

Надеюсь это поможет:)