How to asynchronously load the link with javascript?

I am loading a link asynchronously with javascript but I am not getting the script and css files. Can you help me organize my code so that I can load pages under the same domain asynchronously?

   document.querySelectorAll('a').forEach(el => {
            el.addEventListener('click', (e) => {
                e.preventDefault();
             
                var url = el.href;
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onload = function () {
                   
                        var parser = new DOMParser();
                        const pr = parser.parseFromString(this.responseText, "text/html");
                        document.querySelector('html').innerHTML=pr.querySelector('html').innerHTML;



                       
                }
                xhr.send();
            })
        });

    <a href="https://ipapi.co/">Get</a>

Later I tried to include the script and css files but failed.

 document.querySelectorAll('a').forEach(el => {
            el.addEventListener('click', (e) => {
                e.preventDefault();
             
                var url = el.href;
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onload = function () {
                   
                        var parser = new DOMParser();
                        const pr = parser.parseFromString(this.responseText, "text/html");
                        document.querySelector('html').innerHTML=pr.querySelector('html').innerHTML;
                        pr.querySelectorAll('head style').forEach(es => {
                            var sc = document.createElement('style');
                            sc.src= es.src;
                            document.querySelector('head').appendChild(sc);
                        });


                        pr.querySelectorAll('head script').forEach(es => {
                            var sc = document.createElement('script');
                            sc.src= es.src;
                            document.querySelector('head').appendChild(sc);
                        });



                        pr.querySelectorAll('body style').forEach(es => {
                            var sc = document.createElement('style');
                            sc.src= es.src;
                            document.querySelector('body').appendChild(sc);
                        });


                        pr.querySelectorAll('body script').forEach(es => {
                            var sc = document.createElement('script');
                            sc.src= es.src;
                            document.querySelector('head').appendChild(sc);
                        });










                }
                xhr.send();
            })
        });

   <a href="https://ipapi.co/">2</a>

Although I mark the main site with base, I cannot run the website fully. The javascript files of the loaded page are not working. Normally, location information should come directly, but it doesn’t work. I also tried it on my own website, but the script files are useless. Can you please help?

Answer

I think my new code is working fine. I left it for those who need it.

   document.querySelectorAll('a').forEach(el => {
            el.addEventListener('click', (e) => {
                e.preventDefault();

                var url = el.href;
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onload = function () {





                    var parser = new DOMParser();
                    const pr = parser.parseFromString(this.responseText, "text/html");
                    document.querySelector('html').innerHTML = '';
                    document.querySelector('html').appendChild(pr.querySelector('html'));

                    document.querySelectorAll('script').forEach(es => {
                        var script = document.createElement("script");
                        if (es.src) {
                            script.src = es.src;
                        }
                        script.innerHTML=es.innerHTML;
                        document.body.appendChild(script);
                    });




                }
                xhr.send();
            })
        });

<a href="https://ipapi.co/json/">Test</a>