Returning HTML Fragment from String

#javascript #dom

Here is a very nice way to perform this action.
Thanks to Jonathan Neal

createFragment = (range => {
    range.selectNodeContents(range.createContextualFragment('<template>').lastChild)
    return range.createContextualFragment.bind(range)
})(new Range())

[
  { name: 'Hedral', coat: 'Tuxedo', legs: 4 },
  { name: 'Pillar', coat: 'Ticked Tabby', legs: 3 },
].reduce(
  (table, { name, coat, legs }) => {
    const tr = createFragment(`<tr><td><td><td>`)
    const [ nameTd, coatTd, legsTd ] = tr.firstChild.children
    nameTd.textContent = name
    coatTd.textContent = coat
    legsTd.textContent = legs
    table.lastChild.append(tr)
    return table
  },
  createFragment(`<table><thead><th>Name<th>Coat<th>Legs<tbody>`).firstChild
)