Dynamically added javascript to do immediate execution

I'm dynamically adding script to the page using DOM.

1. If I add script text (e.g. script.text = "...";) it runs immediately.

2. But, if I add an external script (e.g. script.src = "...";) it'll run after my script finishes.

So in example below I'll get

"0 1 2"

and

"3 3 3"

respectively.

( 1.js contains same string - "document.body.innerHTML += i" )

<body>
  <script>
    for (i = 0; i < 3; i++) {
      var script = document.createElement('script');
      script.src = "1.js";
      //  script.text = "document.body.innerHTML += i";
      document.body.append(script);
    };
  </script>
</body>

I do not understand why it works this way, and how do I run 1.js immediately after adding?