I'm trying to make a web app that refreshes its content, its styles and scripts using AJAX, so the site updates everything without reloading the page.
So what happens is that I get the page first of all and when it loads I use ajax to make a request to the server and get the html content then another request to get the styles and finally another request to get the script and put it inside a script tag
<script> //The script goes here </script>
then, I put the script tag at the end of the html content and update the body completely with the content
<body> The HTML content goes here <script> //and here is the script </script> </body>
The requests are successful and the content loads and so the styles and when I use the browser inspector tool I can see the script loaded inside the script tag but the script doesn't execute.
This was an overview of the question, you can see the code here https://codepen.io/Yousef-Essam/project/editor/ZJGxea
app.js serves the index.html file and then the index file gets the script.js file which sends two requests with ajax to get the content.html file and content.js file and sets the href attribute of the link tag to the style file. The content.js file then is put inside a script tag with the new content. Although the content.html loaded and the style file as well and the script loads in the script tag, the script isn't executed.
Why did that happen and how can I fix it?
The problem may be really in using the innerHTML but why doesn't it really work.
Also, I think that eval may be a solution but I want a better solution as using eval is discouraged