Как подгрузить кусок HTML с последующим выполнением скриптов в нём?

Для подгрузки куска HTML с последующим выполнением скриптов в нем в JavaScript, есть несколько способов. Рассмотрим наиболее популярные из них:

1. Использование XMLHttpRequest:
Для начала, создадим объект XMLHttpRequest:

   var xhr = new XMLHttpRequest();

Затем, используем метод open() для указания типа запроса и URL куска HTML:

   xhr.open('GET', 'path/to/file.html', true);

После этого, установим обработчик события onreadystatechange для отслеживания состояния запроса:

   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       var responseHTML = xhr.responseText;
       var tempEl = document.createElement('div');
       tempEl.innerHTML = responseHTML;
       var scripts = tempEl.getElementsByTagName('script');
       for (var i = 0; i < scripts.length; i++) {
         eval(scripts[i].innerText || scripts[i].textContent);
       }
       // выполнение другой логики или манипуляций с полученным HTML
     }
   };

Здесь мы получаем содержимое HTML-файла в виде строки и создаем временный элемент div, в который помещаем полученный HTML. Затем, мы получаем все теги script из временного элемента и выполняем их содержимое, используя функцию eval().

Наконец, вызываем метод send() для отправки запроса:

   xhr.send();

После отправки запроса, полученный HTML будет добавлен в DOM, а скрипты в нем будут выполнены.

2. Использование jQuery:
Если вы используете jQuery, то загрузка и выполнение HTML-кода с последующим выполнением скриптов становится намного проще и удобнее.

Один из вариантов использования jQuery для этой задачи:

   $.get('path/to/file.html', function(data) {
     var tempEl = $('<div>').html(data);
     tempEl.find('script').each(function() {
       eval($(this).text());
     });
     // выполнение другой логики или манипуляций с полученным HTML
   });

Здесь мы используем функцию $.get() для отправки GET-запроса на сервер, получения HTML-кода и обработки его в коллбэке. Затем, создаем временный элемент div, в который помещаем полученный HTML. Далее, мы находим все теги script внутри временного элемента и выполняем их содержимое, используя функцию eval().

Подобные методы имеют и другие библиотеки, например, Axios, Fetch API и т. д.

Но стоит отметить, что динамическая загрузка и выполнение скриптов из внешних ресурсов может создавать проблемы с безопасностью и подвергать ваше приложение риску. Будьте осторожны и тщательно валидируйте полученный HTML и скрипты, чтобы избежать возможных атак XSS (межсайтового скриптинга) и других угроз безопасности.