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/ifra         


        

Answer 1

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);