InnerHTML для radio. Есть ли более элегантное решение?

Question

[the5x]

Пишу свой quiz.
Он состоит из массива объектов, в котором есть:
1. Вопрос
2. Варианты ответов в виде массива.

Вопросы и варианты ответа я встраиваю через innerHTML. Код выглядит грязный, так как и JS и HTML в функциях. Как можно встроить radio, более элегантно, возможно без innerHTML?

Answer 1

[Евгений Журов]

Зачем? Нормальная практика. А 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)

Comments

[the5x]

Спасибо. Возьму вариант с createElement

[imko]

the5x, если будешь делать через создание узлов то почитай еще вот это

[Сергей delphinpro]

the5x, тогда уж стоит написать вспомогательную функцию и использовать ее для построения HTML. Удобнее будет. Что-то типа такого:

createElement('label', {className: 'label'}, function(){
  return [
    createElement('input', {type: 'radio', checked: true}),
    createElement('span', {text: 'Radio input item'}),
  ]
})