How to set innerHTML element correctly?

Question

JavaScript

I have such a problem: I receive data from the server using an Http request. From there, the data needs to be inserted into the template, I do it in js, but it turns out something like this:

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'));

There is a lot of HTML markup and you need to insert about 10-15 variables from the server.
This all works correctly, but it looks a little awkward and ugly. You could do better by leaving the template and using querySelectors and pasting that way, but 10-15 selectors and then 10-15 textContents isn't good for performance.
Everything would be fine, I would leave it like this, but there is one more snag:
-This is the body of the question, which is rendered several times, depending on the number coming from the server
-In addition, there is a socket connection and, if a new question is added, then sockets send it and you need to duplicate this markup again.
Maybe there are some template engines to hide this HTML in at least 1 variable. If you do it now, it won't find elements inserted with `${}`
How can I make the code cleaner and more valid?

Answer 1

As for the template engine, you can write a very simple one of your own.

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;
}

Result:

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