HTML to JS. How to store such neighbors?

Question

JavaScript

There is a lot of terrible HTML in the JS code of our product. The features of this part of the application are that without templates collected on the fly - nothing.
Problem solved by replacing the nonsense of the form:

out = '<div class="vibor1">';
out += '<div class="add-avia-citys"><span class="city-input"><span class="city-code cFrom">' + fromCityCode + '</span><input class="in1 cityAutocomplete bbb ' + rGreenDep + '" type="text" placeholder="Откуда" name="from[0]" id="from0" data-cid="0" value="' + fromCity + '"></span>'
    + '<span id="tl0" class="trip-loop"></span><span class="city-input"><span class="city-code cTo">' + toCityCode + '</span><input class="in1 cityAutocomplete bbb ' + rGreenArr + '" type="text" placeholder="Куда" name="to[0]" id="to0" data-cid="1" value="' + toCity + '"></span></div></span>'
    + '<div class="add-avia-date"><input class="in2 datepicker bbb ' + dateDepGreen + '" type="text" placeholder="Дата вылета" name="date[0]" id="date0" value="' + dateDep + '">';
out += '<div class="avia-slider-time"><div class="slider-min-block"><span class="slider-min" id="fs_0_min">0</span>:00</div><div id="fslider0"></div>'
    + '<div class="slider-max-block"><span class="slider-max" id="fs_0_max">23</span>:59</span></div></div>';
out += '</div>'
    + '<div class="search-block">'
    + '<div class="add-avia-class green-radio">'
    + '<input class="radio-green" type="radio" id="radio-econom" name="class" value="y" checked>'
    + '<label for="radio-econom">Эконом</label>'
    + '<input class="radio-green" type="radio" id="radio-comfort" name="class" value="s">'
    + '<label for="radio-comfort">Комфорт</label>'
    + '<input class="radio-green" type="radio" id="radio-bisnes" name="class" value="c">'
    + '<label for="radio-bisnes">Бизнес</label>'
    + '</div>';

For readable nonsense:

innerOut = ''
+   '<div class="bgr-add">'
+       '<div class="add-avia-citys">'
+           '<span class="city-input">'
+               '<span class="city-code cFrom">' + fromCityCode + '</span>'
+               '<input class="in1 in3 margi cityAutocomplete bbb" type="text" placeholder="Откуда" '
+               'name="from[' + globalCounter + ']" id="from' + globalCounter + '" data-cid="' + cid + '">'
+           '</span>'
+           '<span id="tl' + globalCounter + '" class="trip-loop"></span>'
+           '<span class="city-input">'
+               '<span class="city-code cTo">' + toCityCode + '</span>'
+               '<input class="in1 in3 cityAutocomplete bbb" type="text" placeholder="Куда" '
+                       'name="to[' + globalCounter + ']" id="to' + globalCounter + '" '
+                       'data-cid="' + (cid + 1) + '">'
+           '</span>'
+       '</div>'

The language does not turn to call it "good." Hence the question: what do good and cultured developers do in such cases when they want to keep templates on a separate shelf or do it more cultured and good for normal support?

Answer 1

What's stopping you from using template strings?
https://developer.mozilla.org/en/docs/Web/JavaScript...
frontender.info/es6-in-depth-template-strings

Answer 2

Somehow I don't understand these templates. What's the difference in <?=$string?> или {string}The same with loops, for example in php there is an alternative syntax for loops to insert html code without any quotes. And such code is easier to read than under template engines. IMHO - template engines are slag (I apologize if I offended anyone, but I still have such an opinion)