javascript - 在 HTML DOM Elements 下添加 javascript 文件或 css 文件

Question

我们可以在 html Dom 元素中添加外部 javascript 文件或 Css 文件吗

我创建了一个弹出窗口并想添加一些 js 库

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);

这是我的 jsfiddle

Answer 1

请看下面的代码，

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);
    };

上面的代码会将脚本添加到您的 html 页面的 head 标记中。