Ihor Bratukh

Говорят что через innerHTML такое делать нельзя

Нельзя если это данные от пользователя, а если это ваш сервер отдает эти данные, то почему нет, можно.

gulp-file-include, если используете gulp

const $textarea = document.querySelector('textarea')
const $button = document.querySelector('button')

$button.addEventListener('click', event => {
    const $html = parseHTML($textarea.value)
    const img = $html.querySelector('img.header_subj_logo').outerHTML
    const div = $html.querySelector('div.prob_list').outerHTML
    $textarea.value = img + div
})

function parseHTML(html) {
    const root = document.implementation.createHTMLDocument()
    root.documentElement.innerHTML = html
    return root.documentElement
}

$('input[type="submit"]').on('submit', function (event) {
    event.preventDefault();
    //> Обработчик submit формы
});

/**
 * Обработчик клика баннера
 * @description
 * При клике по баннеру сохраняем клик в LocalStorage
 * Если к-во кликов равно 10, то очищаем клики и делаем что-то
 */
$('.banner').on('click', function () {
    var count = saveBannerClick();
    if (count === 10) {
        clearBannerClick();
        //> Делаем что-то! Показываем submit / форму
    }
});

/**
 * Получить количество кликов по баннеру
 * @returns {?Number}
 */
function getBannerClick() {
    var count = window.localStorage.getItem('bannerClick');
    return count ? Number(count) : null;
}

/**
 * Сохранить клик по баннеру
 * @returns {Number} Актуальное количество кликов
 */
function saveBannerClick() {
    var count = getBannerClick();
    if (count === null) {
        window.localStorage.setItem('bannerClick', 1);
        return 1;
    } else {
        window.localStorage.setItem('bannerClick', ++count);
        return count;
    }
}

/**
 * Очистить клили по баннеру
 * @returns {void}
 */
function clearBannerClick() {
    window.localStorage.removeItem('bannerClick');
}

puppeteer

// Клик на кнопку "Отследить"
$('#trackBtn').on('click', function (event) {
    event.stopPropagation();
    // Ищем iframe виджета и ждем когда он загрузится
    $('#YQContainer').find('iframe').on('load', function () {
        // Скрываем нужный блок в iframe
        $(this).contents().find('.tracklist-da').hide();
    });
});

Ну если вкратце то как-то так:

ajax('https://example.com/stations', { //> https://example.com/stations?country=russia&limit=10
    country: 'russia',
    limit: 10
}).done(function (data) {
    var table = '';
    for (var key in data) {
        table += templateDOM(data[key]) || '';
    }
    $('body').append('<table>' + table + '</table>');
});

function ajax(link, params, setup) {
    return $.ajax($.extend(true, {}, {
        method: 'GET',
        dataType: 'json'
    }, setup || {}, {
        url: link + (params ? '?' + $.param(params) : '')
    }));
}

function templateDOM(data) {
    return `
        <tr>
            <td>${data.id}</td>
            <td>${data.routeName}</td>
            <td>${data.stationName}</td>
            <td>${data.dateArrival || '-----'}</td>
            <td>${data.dateDeparture}</td>
        </tr>
    `;
}

Собрать это все с помощью gulp/grunt/webpack

Самый обычный пример очень простого шаблонизатора, может вам и не будет нужен handlebars

<div class="entry">
	<h1>{{title}}</h1>
	<div class="body">
		{{body}}
	</div>
</div>

<script>
	template(document.querySelector('.entry'), {
		title: 'Lorem ipsum dolor sit amet.',
		body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, optio.'
	});

	function template(node, data) {
		node.innerHTML = tag(node.innerHTML, data);
	}

	function tag(input, data) {
		for (var key in data) {
			input = input.replace(new RegExp('{{'+ key +'}}', 'g'), data[key]);
		}
		return input;
	}
</script>