方法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();

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

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

最近做專案遇到的，稍作整理