document.body.append(`<div class="x"><span>1</span>23</div><div>45</div>`)

って書きたい
innerHTML ならできるけど append にはできない
これだとそのまま文字列として追加される

一旦 innerHTML に入れて全部の子要素を追加するの面倒
なので HTML テキストを DocumentFragment 化するもの

const fr = html => Object.assign(document.createElement("template"), {innerHTML: html}).content

これを使って

document.body.append(fr(`<div class="x"><span>1</span>23</div><div>45</div>`))
document.body.append(fr`<div class="x"><span>1</span>23</div><div>45</div>`)

() 書くの面倒ならなくしてテンプレートストリングのタグとしても使える
ただし間に ${} による埋め込みがないときだけ

せっかくだからタグならではの機能でエスケープ機能を入れる

const html = (strs, ...values) => {
    const esc = value => Object.assign(document.createElement("div"), { textContent: value }).innerHTML
    const fmt = value => value != null
        ? (value.html ? value.html : value.text ? esc(value.text) : esc(value))
        : ""
    return fr(strs.reduce((a, e, i) => a + fmt(values[i - 1]) + e))
}

これを使うと

document.body.append(html`<div class="x"><span>1</span>23</div><div>45</div>`)
document.body.append(html`<div class="x"><span>${1}</span>${"<br>"}${{html:"<b>bold</b>"}}</div><div>45</div>`)

「<br>」はエスケープされて文字列として表示されて 「<b>」 は太文字になる