Зачем? Нормальная практика. А jsx в react как же? Да, это не совсем то же самое, но внешне выглядит почти так же. Кроме того это наоборот гораздо нагляднее, чем городить огороды из document.createElement со всеми атрибутами и проч.
Сами сравните, какой вариант короче и нагляднее?
<div id="one"></div>
<div id="two"></div>
const one = document.querySelector('#one')
const two = document.querySelector('#two')
// 1
one.innerHTML = `
<label class="label">
<input type="radio" checked />
<span>Radio input item</span>
</label>
`
// 2
const label = document.createElement('label')
const input = document.createElement('input')
const title = document.createElement('span')
label.className = 'label'
input.type = 'radio'
input.setAttribute('checked', true)
title.textContent = 'Radio input item'
label.appendChild(input)
label.appendChild(title)
two.appendChild(label)
