Add Main tag with correct ID if missing to fix broken skip links in Elementor

footer.js

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Check if any <main> tag exists
        let mainElement = document.querySelector("main");

        if (mainElement) {
            // If a <main> tag exists but doesn't have id="content", add the ID
            if (mainElement.id !== "content") {
                mainElement.id = "content";
            }
        } else {
            // Locate the content to wrap in a <main> tag
            const contentElement = document.querySelector(
                'div[data-elementor-type="single-post"], div[data-elementor-type="single"], div[data-elementor-type="wp-page"], div[data-elementor-type="wp-post"]'
            );

            if (contentElement) {
                // Create a new <main> element
                mainElement = document.createElement("main");
                mainElement.id = "content";

                // Wrap the content with the new <main> element
                contentElement.parentNode.insertBefore(mainElement, contentElement);
                mainElement.appendChild(contentElement);
            }
        }
    });
</script>