Render HTML template and replace items

example-render-html-template.ts

import { renderTemplate } from './html-utils.ts'

const tpl = `
<div class="item">
  <img class="tick-icon" src="./images/icons/tick.png" />
  <span>{text}</span>
</div>`

const el = renderTemplate(tpl, { text: 'Hello world' }) as HTMLDivElement
document.body.appendChild(el)

html-utils.ts

export const renderTemplate = (template: string, replaceItems: any | undefined = undefined): Element => {
  let tpl = template
  if (replaceItems !== undefined) {
    Object.keys(replaceItems).forEach(key => {
      tpl = tpl.replaceAll(`{${key}}`, replaceItems[key])
    })
  }
  return new window.DOMParser().parseFromString(tpl, 'text/html').body.children[0]
}