Loading script dynamically with data attribute

Question

I want to load this script dynamically and it contains data attribute

<script class="podigee-podcast-player" 
  src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="https://pt.podigee.io/embed?context=external">
</script>

I tried this. But it didn't work for me. Is it a correct way to set data-configuration attribute? Where I am making mistake?

var script = document.createElement('script'); 
script.type = 'text/javascript';
script.async = true;
script.src = 'https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js';
script.class = 'podigee-podcast-player';
script.dataset.configuration = 'https://pt.podigee.io/embed?context=external';
var s = document.getElementsByTagName("body")[0].appendChild(script, s);

Did you look into the developer tools on how the script is embedded? It should show up in your HTML — dustin-we
– dustin-we, Commented Sep 21, 2020 at 7:55
Try simple adding attribute script.setAttribute('data-configuration', 'https://pt.podigee.io/embed?context=external') — Justinas
– Justinas, Commented Sep 21, 2020 at 7:57

04FS · Accepted Answer · 2020-09-21 08:10:41Z

1

Setting the data attribute isn’t the actual problem here, but you tried to set the class (which appears to be important) incorrectly.

That part needs to be script.className = 'podigee-podcast-player';

answered Sep 21, 2020 at 8:10

04FS

5,8502 gold badges13 silver badges21 bronze badges

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

1 Comment

edddd Over a year ago

That's an issue too, did not notice.

edddd · Accepted Answer · 2020-09-21 08:16:23Z

0

When you type

var s = document.getElementsByTagName("body")[0].appendChild(script, s);

the s parameter in the appendChild() method doesn't exist when appendChild() is called. Also appendChild() only needs the child element as argument. Try doing

var s = document.getElementsByTagName("body")[0].appendChild(script);

Also you only need to type var s = if you plan on using the value that appendChild() returns, which, according to the documentation, is the child element itself.

answered Sep 21, 2020 at 8:16

edddd

4921 gold badge6 silver badges20 bronze badges

Collectives™ on Stack Overflow

Loading script dynamically with data attribute

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related