What are the ways to dynamically build an interface, DOM?

Question

JavaScript

Good day! Forced to write an interface on Ajax requests. It's so bad. You need to generate DOM elements from JS.
I didn’t come up with anything better than Jquery, and it turns out such a healthy footcloth:

let hTpl = '<div data-guid = "#GUID" class = "col-md-12 project-container__item">\
              <span class = "project-item__number">#NUMBER</span>\
              <span class = "project-item__title">#NAME</span>\
              <div class = "project-item__control">\
                <img src = "img/i_play.png">\
                <img src = "img/i_refresh.png">\
              </div>\
              <div class = "project-item__progress">\
                <progress class = "midea-progress--little" max="100" value="#PROGRESS"></progress>\
                <span class = "midea-progress--little">#PROGRESS%</span>\
              </div>\
            </div>';

            hTpl = hTpl.replaceAll('#NAME', arProject[ii].NAME);
            hTpl = hTpl.replaceAll('#GUID', arProject[ii].GUID);
            hTpl = hTpl.replaceAll('#NUMBER', ii);
            hTpl = hTpl.replaceAll('#PROGRESS', arProject[ii].PROGRESS);

Are there ways to build an interface beautifully and concisely? All my functions are healthy.
Also, I still assign all events through

$(document).ready(function () {
$('.js-progress-reload').click(function () {});
$('.js-progress-stop').click(function () {});
});

And again, this healthy function comes out when a lot of writing is difficult to maintain. Maybe professionals will share their experience on how to organize all the logic of the interface, maybe now by 2021 new methods, standards, frameworks have come out. I myself am from 2015))) I wrote the last projects that year.

Answer 1

Vue.js / React / Angular

Answer 2

React, JSX