在HTML DOM元素下添加JavaScript文件或CSS文件

Question

Can we add external javscript files or Css files in html Dom Elements

i have created a popup and want to add few js libraries

var alert_box=document.createElement('div');
alert_box.setAttribute('id', 'myhive');
var inline_css="box-sizing: content-box;font-family: Arimo, sans-serif;z-index: 214748364898;position: fixed;right:30px;top:30px;";
inline_css+="width:470px;height:100px;background:#333333;padding:7px 35px 0;box-shadow:#000 1px 1px 2px;margin: 0px;border:none;outline: none;";
alert_box.setAttribute('style', inline_css);
popup_text="Test popup for demo";
alert_box.innerHTML="<h3 style='font-size:15px !important;color:white;height:30px'>"+popup_text+"</h3><div class='button_walk'>"+
"<input type=text  id='input_txt' style='float:left;margin-left:0px;width:200px'>"+
"<input type=button name=txtbtn id=clbtn value=Save style='margin-left:30px'></div> ";

    document.body.appendChild(alert_box);

here is my jsfiddle

Answer 1

Please look at below code,

LoadScript = function (scriptUrl, callback) {
        var scriptElement = document.createElement('script');
        scriptElement.src = scriptUrl;
        var head = document.getElementsByTagName('head')[0], done = false;

        /* Attach handlers for all browsers */
        scriptElement.onload = scriptElement.onreadystatechange = function () {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                callback();
                scriptElement.onload = scriptElement.onreadystatechange = null;
                head.removeChild(scriptElement);
            }
        };
        head.appendChild(scriptElement);
    };

The above code will add script into your html page's head tag.

Answer 2

You can do something like this :

<script type="application/javascript">
    function loadExternalJsFile(file) {

    var elm = document.createElement("script");

    elm.type = "application/javascript";

    elm.src = file;

    document.body.appendChild(elm);
}


</script>

<button onclick="loadExternalJsFile('somejsfile.js');">Load somejsfile.js</button>