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

 

其实，两种方法都差不多，只是看自己更习惯使用怎样的写法

方法无所谓，能实现就可以了

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