Load a script dynamically within the element

Question

Okay so I'm trying to load a backup .js file synchronously in the event of a script dependency being unavailable, and everything seems to be working fine except for the fact that said script doesn't actually load, even though the element itself with the src is created:

[etc]

<head>
<script id = 'self'>
 if (typeof jQuery === 'undefined') {

  function insertAfter(referenceNode, el) { 
    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling); 
  }

  var loadjq = document.createElement('script');

  // backup CDN
  loadjq.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'; 

  loadjq.type = 'text/javascript';
  // loadjq.async = false;

  insertAfter(document.getElementById('self'), loadjq);

 }  
</script>

// element IS created here: <script src = 'https://ajax.google...' type = 'text/...'></script>
// but nothing is executed

<script>
  console.log($); // Reference Error
</script>
</head>

[etc]

Do note that I have not put this within a DOMContentLoaded event or anything, but I feel this should be working. I tested with Chrome and Firefox, and it's not a caching error. Any suggestions?

Possible duplicate of [Load script async?](https://stackoverflow.com/questions/36592002/load-script-async) — Keimeno, Sep 12 '19 at 21:57
Possible duplicate of [Asynchronous Script Loading Callback](https://stackoverflow.com/questions/12820953/asynchronous-script-loading-callback) — Barkermn01, Sep 12 '19 at 22:02
Damn linked to the wrong but the point is this is well covered on SO. — Barkermn01, Sep 12 '19 at 22:03

Soc · Accepted Answer · 2019-09-13T00:07:25.487

0

Note, this isn't ideal, however if you absolutely need to you can use the following.

Use document.write to achieve this synchronously.

<script>
document.write(`jQuery is: ${typeof(jQuery)}.`);
</script>

<script>
document.write(`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><\/script>`);
</script>

<script>
document.write(`jQuery is: ${typeof(jQuery)}.`);
</script>

Note that you cannot have </script> in the string directly as this will terminate the actual script tag.

edited Sep 13 '19 at 00:07

answered Sep 12 '19 at 23:27

Soc

7,425
4
13
30

You can, however, escape the forward-slash like `'<\/script>'` so that backticks aren't needed. Thank you, best answer. – Kithraya Sep 13 '19 at 00:03
I've fixed up the snippet as well. – Soc Sep 13 '19 at 00:07

Load a script dynamically within the element

1 Answers1

Linked