Correctly adding defer attribute to script tag with pure JavaScript

Question

I am trying to add a deferred script tag like this:

const script = document.createElement('script');
  script.setAttribute('src', '/script.js');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('defer', true);//this is the code in question!
  document.getElementsByTagName('body')[0].appendChild(script);

But I found out the result script tag will generate the defer attribute like defer=true instead of just defer.

Are they same? What is the implication if I do defer=true rather than defer?

Anish Goyal · Accepted Answer · 2018-08-03 20:39:46Z

33

I would change it to:

script.setAttribute("defer", "defer");

They usually behave the same (although the docs technically state the value of an attribute such as defer should not be "true" or false") - or at least in any browser I've used boolean attributes in. The attribute defer is usually implemented to take effect if present in the script tag. Its value is ignored.

That being said, the spec specifies that a boolean attribute's value should not be present, or otherwise should be set to itself, with no leading / trailing whitespace (case does not matter). So, it's preferable to leave the value as the name of the attribute when setting it dynamically.

Refer to this documentation for boolean attributes (HTML5): https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

Quote from that doc:

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

And this documentation for the defer attribute (HTML5): https://www.w3.org/TR/html5/scripting-1.html#attr-script-defer

It states:

The async and defer attributes are boolean attributes that indicate how > the script should be executed.

Update: It looks like if you set an attribute to the empty string, it will add the attribute with no value. This is also an option.

edited Aug 3, 2018 at 20:39

answered Mar 23, 2017 at 19:36

Anish Goyal

2,85914 silver badges18 bronze badges

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

2 Comments

Willster Over a year ago

It is not possible to use defer for scripts that are dynamically added to the DOM. They are always loaded async (defer attribute is ignored). Please see my answer

Anish Goyal Over a year ago

This is a good point - the defer tag isn't necessarily. However, this answer is applicable in general to questions about best practices for how to add boolean attributes to DOM elements with JS.

Chris · Accepted Answer · 2021-10-21 16:44:33Z

5

This worked for me: (chrome 94)

script.defer = true;

answered Oct 21, 2021 at 16:44

Chris

1,10719 silver badges23 bronze badges

Comments

Abu Sayed · Accepted Answer · 2022-04-25 10:16:02Z

0

If you already have a script tag and want to add defer/async attribute. Then use this code.

window.addEventListener('load', (event) => {
    var fbChatScript = document.querySelector('#facebook-jssdk');
    fbChatScript.setAttribute('defer', '');
});

answered Apr 25, 2022 at 10:16

Abu Sayed

1951 silver badge5 bronze badges

Comments

Willster · Accepted Answer · 2024-06-21 16:10:15Z

0

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:10

Willster

2,5871 gold badge32 silver badges32 bronze badges

Collectives™ on Stack Overflow

Correctly adding defer attribute to script tag with pure JavaScript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related