Why does a fetched html file's script not execute?

I have been trying to work on this but to no progress came here about this issue. The fetched html file's script fails to execute as you may see here it has script that should change the color of body when i fetch it but that does not happen however styles work fine.

Can anyone tell me why this isnt working?

Index HTML

<!DOCTYPE html>
<html>

<body>
  <script>
    fetch("Onload.html")
      .then((response) => {
        return response.text();
      })
      .then((html) => {
        document.body.innerHTML = html;
      });
  </script>
</body>

</html>

Fetched HTML

<p>HELLO WORLD!</p>
<script>
  document.body.style.backgroundColor='green'
</script>

Solution

Without jquery! Here is how to do it fellas

Index html

<!DOCTYPE html>
<html>

<body>
  <script>
    fetch("Onload.html")
      .then((response) => {
        return response.text();
      })
      .then((html) => {
        document.body.innerHTML=html;
      });
    fetch('onload.js')
    .then(response => response.text())
    .then(txt => {
        var script = document.createElement("script");
        script.innerHTML = txt;
        document.body.appendChild(script);
      });
    
  </script>
</body>

</html>