correctly adding defer attribute to script tag with pure javascript

javascript setattribute script-tag deferred-loading
Ezeewei picture Ezeewei · Mar 23, 2017 · Viewed 10.8k times · Source

so I try 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 the same? What is the implication if I do defer=true rather than defer?

Thanks!

Answer

Anish Goyal picture Anish Goyal · Mar 23, 2017

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.

Related questions

JavaScript Adding an ID attribute to another created Element

I have some code here that will do the following. The code creates an element "p" then I append it to a "div" in the HTML. I would like that "p" I just created have an unique identifier (ID) and …

Read More
How to Set OnClick attribute with value containing function in ie8?

My goal is to change the onclick attribute of a link. I can do it successfully, but the resulting link doesn't work in ie8. It does work in ff3. For example, this works in Firefox 3, but not IE8. Why? <…

Read More
When to use setAttribute vs .attribute= in JavaScript?

Has a best-practice around using setAttribute instead of the dot (.) attribute notation been developed? E.g.: myObj.setAttribute("className", "nameOfClass"); myObj.setAttribute("id", "someID"); or myObj.className = "nameOfClass"; myObj.id = "someID";

Read More