Add defer or async attribute to dynamically generated script tags via JavaScript

Question

I am dynamically putting a script tag to the DOM of my page like this:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

This should generate something like this:

<script src="https://www.youtube.com/iframe_api"></script>

I just want to put in a defer or async to this script tag like this:

<script src="https://www.youtube.com/iframe_api" defer async></script>

So how do I do this using JavaScript?

izogfif · Accepted Answer · 2021-09-29 12:08:32Z

96

There's no need to add async to your script tag, since that attribute is enabled by default for dynamic scripts.

As for defer, just as you change the src attribute in JavaScript, you can also enable that one like so:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.defer = true;
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Alternatively, you can use setAttribute() for this.

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.setAttribute('defer','');
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

edited Sep 29, 2021 at 12:08

izogfif

7,9252 gold badges39 silver badges34 bronze badges

answered Dec 22, 2016 at 18:37

Jon Uleis

18.9k3 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Julian Knight Over a year ago

How about tag.defer = true?

Amir Ali Akbari Over a year ago

The link article on MDN does not say anything about async being the default for dynamic script tags. Can you reference exactly where it does say so?

Marçal Juan Over a year ago

Dynamic scripts are created with async flag enabled by default.

kskashyap94 Over a year ago

I was able to set defer attribute for dynamic scripts, but couldn't find any difference with it's presence. Can I please know if it will have any effect ?, I mean does it behave like a static script with defer attribute?

Willster Over a year ago

Dynamically inserted scripts are ALWAYS async, defer attribute will be ignored. Please see my answer.

Ickata · Accepted Answer · 2023-03-31 19:06:30Z

2

In order to load dynamic scripts asynchronously, but execute them in the order of definition, use script.async = false:

['1.js', '2.js'].forEach(s => {
   const script = document.head.appendChild(document.createElement('script'));
   script.async = false;
   script.src = s;
});

Source: https://web.dev/speed-script-loading/#the-dom-to-the-rescue

answered Mar 31, 2023 at 19:06

Ickata

751 silver badge9 bronze badges

Comments

Willster · Accepted Answer · 2024-06-21 16:17:05Z

1

The defer attribute is ignored for dynamically inserted scripts. They will always be loaded async. You can read more about it here.

answered Jun 21, 2024 at 16:17

Willster

2,5871 gold badge32 silver badges32 bronze badges

Collectives™ on Stack Overflow

Add defer or async attribute to dynamically generated script tags via JavaScript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related