why scripts are not loaded in using javascript?

Question

I am trying to load script and link using javascript.Previously I was using jquery not I am removing jquery from our project only using javascript.

previously I write like this

   $('head link[data-reqjq][rel=preload]').each(function(){
      var a = document.createElement('script');
      a.async=false;
      a.src=$(this).attr('href');
      this.parentNode.insertBefore(a, this);
    });
  $(function(){
    $('script[data-reqjq][data-src]').each(function(){
      this.async=true;
      this.src=$(this).data('src');
    });
  });

Now I am trying to load both things using javascript.

like this but it is not loading

var elements = document.querySelectorAll('head link[data-reqjq][rel=preload]');
Array.prototype.forEach.call(elements, function(el, i){
  var a = document.createElement('script');
  a.async=false;
  a.src=this.getAttribute('href');
  this.parentNode.insertBefore(a, this);
});

var elements = document.querySelectorAll('script[data-reqjq][data-src]');
Array.prototype.forEach.call(elements, function(el, i){
  el.async=true;
  el.src=el.data('src');
});

here is my code

https://jsbin.com/havuxujixi/3/edit?html,js,output

GMKHussain · Accepted Answer · 2020-11-15 06:03:17Z

1

Simple Solution

/*
 add JS File 
*/
function addJsFileFunc(filename) {
        document.getElementsByTagName('head')[0].innerHTML.toString().includes(filename + ".js"))
        loadScript('/',filename + ".js");
}

addJsFileFunc("paht/script-file-name.js")




/*
 script tag
*/
let scriptTag = document.createElement('script');
    scriptTag.type = 'text/javascript';
    scriptTag.src = 'url.js';    

document.getElementsByTagName('head')[0].appendChild(scriptTag);

edited Nov 15, 2020 at 6:03

answered Nov 15, 2020 at 5:51

GMKHussain

4,8251 gold badge36 silver badges22 bronze badges

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

1 Comment

Saadi Toumi Fouad Over a year ago

document.head('head')[0].appendChild(scriptTag); should be document.head.appendChild(scriptTag);

Mechanic · Accepted Answer · 2020-11-15 06:17:15Z

0

1 - add a end tag to the script; </script> instead of /> (check here)

2 - your second query selector have an error in its callback : .data('src') should be .getAttribute('src')

also as a suggestion use simple forEach instead of Array.prototype.call

var elements = document.querySelectorAll('script[data-reqjq][data-src]');
elements.forEach(function(el, i){
  el.async=true;
  el.src=el.getAttribute('src');

});

the first selector can be written as:

var elements = document.querySelectorAll('head link[data-reqjq][rel=preload]');
elements.forEach(function(el, i){
  var a = document.createElement('script');
  a.async=false;
  a.src=el.getAttribute('href');
  // mounting new one inplace
  el.parentNode.append(a);
  // unmouting the old one
  el.remove();
});

edited Nov 15, 2020 at 6:17

answered Nov 15, 2020 at 6:05

Mechanic

5,4684 gold badges19 silver badges44 bronze badges

2 Comments

user944513 Over a year ago

what about first head link[data-reqjq][rel=preload???? is it correct

Mechanic Over a year ago

I didnt test that since there wasn't a match in html snippet provided, I'll do now.

Collectives™ on Stack Overflow

why scripts are not loaded in using javascript?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related