Pull content from another page

 <script> 

/**
 * Fetches HTML content from a specified URL and appends a selected element from it to the current document.
 * Useful for dynamically loading and displaying content from another part of your website.
 */
async function fetchAndAppendElement() {
    try {
        // Specify the URL from which to fetch HTML content. Adjust '/' to your specific needs.
        const response = await fetch('/');
        
        // Check if the fetch request was successful
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        // Extract the HTML text from the response
        const html = await response.text();
        
        // Create a temporary container to parse the fetched HTML text
        const container = document.createElement('div');
        container.innerHTML = html;
        
        // Adjust the selector below to target the specific element you want to fetch from the fetched content
        const fetchedElement = container.querySelector("[element-ajax='content']");
        
        if (fetchedElement) {
            // Adjust the selector below to target where in the current document you want to append the fetched element
            const appendItem = document.querySelector("[element-ajax='wrapper']");
            
            // Clone the fetched element to prevent modifying the original element in the temporary container
            const clonedElement = fetchedElement.cloneNode(true);
            
            // Append the cloned element. Ensure appendItem is not null before appending.
            if (appendItem) {
                appendItem.appendChild(clonedElement);
            }
        } else {
            console.error('Failed to fetch the element. Check the selector for the element you are trying to fetch.');
        }
    } catch (error) {
        console.error('An error occurred during the fetch and append operation:', error);
    }
}

/**
 * Calls fetchAndAppendElement function when the page has finished loading.
 * This ensures the DOM is ready for manipulation.
 */
window.addEventListener('DOMContentLoaded', fetchAndAppendElement);


</script>