JS перенести не полную информацию с другой страницы, не понимаю как сделать иначе?

Question

[licvis]

Есть страница "lenta_work.html", где есть блоки с именем "wowo". Эти блоки я хочу чтобы JS автоматически переносил на другую страницу.
Блок, который необходимо дублировать:

<div class="xzzzzzz" id="afisha_koncert">
          <a href="https://pixelherber.ru/content/af02r/af"><img src="content/af02r/thank.png" alt=""></a>
          <figcaption> <a href="#">Афиша<br><span id="under_logo_work_bl">Спасибо всем</span></a></figcaption>
        </div>

JS код на странице куда необходимо вывести:

<script>
        // JavaScript to import elements with class "xzzzzzz" from page1.html
        window.addEventListener('DOMContentLoaded', function () {
            // Get the content from page1.html using an XMLHttpRequest
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/lenta_work.html', true);

            xhr.onload = function () {
                if (xhr.status === 200) {
                    // Parse the response as a DOM object
                    var parser = new DOMParser();
                    var doc = parser.parseFromString(xhr.responseText, 'text/html');

                    // Extract all elements with class "xzzzzzz"
                    var elementsToImport = doc.querySelectorAll('. xzzzzzz');

                    // Display the imported elements in page2.html
                    var importedContainer = document.getElementById('imported-logos');
                    elementsToImport.forEach(function (element) {
                        // Clone each element and append it
                        var clonedElement = element.cloneNode(true);
                        importedContainer.appendChild(clonedElement);
                    });
                }
            };

            xhr.send();
        });

В итоге я получаю текст, но присутствующая картинка отсутствует. Не понимаю как записать чтобы он мне продублировал полностью этот блок ( не только текст )

Answer 1

[Евгений Механиков]

Добрый день,

Самый простой вариант с использованием jQuery

$( "#result" ).load( "ajax/test.html" );

С уважением,
Евгений

Comments

[licvis]

Прописал на страницу вывода, в итоге все также выводит только текст

<div id="imported-xzzzzzz">
        <!-- Imported content will be displayed here -->
    </div>
    
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        // JavaScript (jQuery) to duplicate the .xzzzzz block
        $(document).ready(function () {
            // Load content from page1.html
            $.get('/lenta_work.html', function (data) {
                // Extract the .xzzzzz block from the loaded content
                var importedContent = $(data).find('.xzzzzzz');
                
                // Append the imported content to the target element
                $('#imported-xzzzzzz').append(importedContent);
            });
        });
    </script>

[licvis]

Перепроверил, все ок, работает. Thank