js動態在head中添加script和css

方法1；

封裝方法，逐個添加

// 動態添加js
function appendJQCDN(src) {
    var head = document.head || document.getElementsByTagName('head')[0];
    if(src.indexOf("js")== -1){ //css
        var style = document.createElement('style');
        style.setAttribute("rel", "stylesheet"); 
        style.setAttribute("href",src);
        head.appendChild(style);
    }else{
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.setAttribute("src",src);
        head.appendChild(script);
    }
}

appendJQCDN("css/animate.css");
appendJQCDN("css/public.css");
appendJQCDN("js/jquery-3.5.0.min.js");
appendJQCDN("js/common.js");

其中動態添加的效果如下

 

其中  js/header.js 為上面添加script和css的方法，剩下的幾個為動態添加的部分。

 

 

方法二：

可以直接在head中拼接要添加的css和script。

function appendJQCDN(){
    var head = document.head || document.getElementsByTagName('head')[0];
    
    head += '<link rel="stylesheet" href="css/animate.css" />';
    head += '<link rel="stylesheet" href="css/public.css" />';
    head += '<link rel="stylesheet" href="css/style.css" />';
    head += '<script type="text/javascript" src="js/jquery-3.5.0.min.js"></script>';
    head += '<script type="text/javascript" src="js/common.js"></script>';
    
    document.getElementsByTagName('head')[0].innerHTML += head;
}
appendJQCDN();

 

其實，兩種方法都差不多，只是看自己更習慣使用怎樣的寫法

方法無所謂，能實現就可以了

最近做項目遇到的，稍作整理