How to add dynamically created script tag attribute in JavaScript?

Question

I am trying to add data-client-key in my dynamically created JavaScript attribute. Check below code what I have tried:

var script = document.createElement("script")
script.type = "text/javascript";
script.src = 'https://app.example.com/snap/script.js';
//script.data-client-key="CLIENT-KEY-HERE"; /* showing error message */
document.getElementsByTagName(script)[0].setAttribute("data-client-key", "CLIENT-KEY-HERE"); /* Uncaught TypeError: Cannot read property 'setAttribute' of undefined */
document.getElementsByTagName("head")[0].appendChild(script);

My output should be like below when I inspect element:

<script src="https://app.example.com/snap/script.js" data-client-key="CLIENT-KEY-HERE"></script>

The newly-created script element is not in the DOM before you insert it. — Teemu
– Teemu, Commented Jun 25, 2019 at 10:22

shrys · Accepted Answer · 2019-06-25 10:22:49Z

7

Change

document.getElementsByTagName(script)[0].setAttribute("data-client-key", "CLIENT-KEY-HERE");

to

script.setAttribute("data-client-key", "CLIENT-KEY-HERE");

as you already have your script element in script variable

answered Jun 25, 2019 at 10:22

shrys

5,9682 gold badges26 silver badges38 bronze badges

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

Comments

deathstroke · Accepted Answer · 2019-06-25 10:23:28Z

1

Please have a look at the following documentation for setAttribute. You can do like this

b.setAttribute("name", "helloButton");

answered Jun 25, 2019 at 10:23

deathstroke

5937 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to add dynamically created script tag attribute in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related