How to append <script> to Head or Body Using Javascript?

Question

I have a JavaScript problem.

I searched on google how to append using javascript and I found an example. I want to manually append a script tag to head or body, but the example just appends in the head.

I edited the example so that the script tag can be appended in the head or body, but the code doesn't work.

Can anyone help me fix my problem? And please show me the demo on jsfiddle :D

Thanks :)

Here my script:

//JS
//Defined with  loadjscssfile("yourcssurl.js", "js", "head"); or addCss("yourcssurl.js", "js", "body");
//CSS
//Defined with  loadjscssfile("yourcssurl.css", "css", "head"); or addCss("yourcssurl.css", "css", "body");
function loadjscssfile(filename, filetype, pos) {
    if (filetype == "js") { //if filename is a external JavaScript file
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }

    if (typeof fileref == filetype) {
        document.getElementsByTagName(pos)[0].appendChild(fileref)
    }

    else if (typeof fileref != "undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref)
    }
}

loadjscssfile("myscript.js", "js", "body") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js", "body") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css", "body") ////dynamically load and add this .css file

And here is the original script, before I edited: Dynamically loading an external JavaScript or CSS file

Sorry for my bad english :)

mikhail · Accepted Answer · 2014-10-21 03:59:14Z

4

You can learn from google to appending scripts dynamically

(function () {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();

I'm not sure what you are trying to achieve at the end of the day, but take a good look at the script, it's async. So you do not worry about the sequence of the resource loading.

In some use cases, you might need to control the sequence of the script loading, you can consider using RequireJS or Modernizr

edited Oct 21, 2014 at 3:59

mikhail

5,2254 gold badges38 silver badges47 bronze badges

answered Oct 21, 2014 at 3:21

Lee Gary

2,4172 gold badges24 silver badges38 bronze badges

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

Comments

mikhail · Accepted Answer · 2014-10-21 03:36:33Z

1

You are pretty close, but you don't need the extra if condition you added, this should be sufficient:

function loadjscssfile(filename, filetype, pos) {
    var fileref;

    if (filetype === "js") { //if filename is a external JavaScript file
        fileref = document.createElement("script");
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", filename);
    }
    else if (filetype === "css") { //if filename is an external CSS file
        fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }

    if (fileref) {
        document.getElementsByTagName(pos)[0].appendChild(fileref);
    }
}

Give that a shot.

answered Oct 21, 2014 at 3:36

mikhail

5,2254 gold badges38 silver badges47 bronze badges

1 Comment

bagusa4 Over a year ago

thanks! you're good man :D Your code is working as what I want. :D > the demo jsfiddle.net/bagusa4/vg7ysa8o hii :D

Collectives™ on Stack Overflow

How to append <script> to Head or Body Using Javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related