Как задать элементу innerHTML корректно?

Question

[Roman Chasovitin]

У меня есть такая проблемка: получаю данные с сервера при помощи Http-запроса. Оттуда данные нужно вставлять в шаблон, делаю это в js'е, но получается что-то вроде этого:

const questionWrapper = document.createElement('div');
questionWrapper.innerHTML = `<div class="single-question">
    <div class="single-question__action-info">
      <span class="single-question__action-id">
        Акция №${el.event_id}
      </span>
    </div>
    <div class="single-question__content">
      <div class="single-question__question">
        <h5 class="single-question__question-title">Вопрос <span class="open-input open-input_question"><img src="img/question-icon.svg" alt=""></span></h5>
        <div class="single-question__question-text">
        ${el.question}
        </div>
        <div class="input-wrapper">
          <textarea class="question-textarea" name="" id=""></textarea>
          <button class="submit-textarea submit-textarea_question">Ответить</button>
        </div>
      <div class="single-question__answer">
        <h5 class="single-question__answer-title">Ответ <span class="open-input open-input_answer open-input_grey"><img src="img/question-icon.svg" alt=""></span></h5>
        <div class="single-question__answer-text">
          ${el.answer}
        </div>
        <div class="input-wrapper">
          <textarea class="answer-textarea" name="" id=""></textarea>
          <button class="submit-textarea submit-textarea_answer">Ответить</button>
        </div>
     </div>`;
  $('.answers__list').insertBefore(questionWrapper, $('.single-question_wrapper'));

HTML-Разметки очень много и вставлять нужно около 10-15 переменных с сервера
Это все корректно работает но выглядит немного несуразно и некрасиво. Можно поступить лучше, оставив шаблон и использовать querySelector'ы и вставлять таким образом, но 10-15 селекторов и потом еще и 10-15 textContent'ов это не есть хорошо для производительности.
Все бы ничего, я бы оставил так, но есть еще одна загвоздка:
-Это тело вопроса, которое рендерится несколько раз, в зависимости от кол-ва, приходящего с сервера
-Помимо этого есть подключение по сокету и, если добавляется новый вопрос, то сокеты его присылают и нужно снова дублировать эту разметку.
Может быть есть какие нибудь шаблонизаторы, чтобы спрятать этот HTML хотя бы в 1 переменную. Если это сделать сейчас, то он не найдет элементы, вставляемые при помощи `${}`
Как можно сделать код более чистым и валидным?

Answer 1

[Ihor Bratukh]

По поводу шаблонизатора, можете написать очень простой свой.

var html = `
<div class="single-question">
	<span class="{{class}}">{{text}}</span>	
</div>
`;

var result = tag(html, {
	class: 'test',
	text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, magni.'
});

function tag(input, data) {
	for (var tag in data) {
		input = input.replace(new RegExp('\\{{'+ tag +'\\}}', 'gi'), data[tag]);
	}
	return input;
}

Результат:

<div class="single-question">
	<span class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, magni.</span>	
</div>