首页 > 代码库 > 动态添加div及对应的js、css文件

动态添加div及对应的js、css文件

动态添加div及对应的js、css文件

 

在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用。

 

/*利用Jquer动态加载div及对应的CSS文件、js文件。好处减少Index页面中代码的冗余,方便维护*//***config参数说明:var config = {   name: ‘demo2‘,       ***需要添加的div的html文件名称   divContainer: ‘div2‘,***在目标页面中存放动态载入div的容器   path:‘plugin/‘       ***基于当前点击事件js的相对文件位置}*/function addDivModel(config) {    //添加div    var url = config.path + config.name + ".html";    $.get(url, function (data) {        $("#" + config.divContainer).html(data);    })    //添加css样式表    var cssTag = document.getElementById(‘loadCss‘);    var head = document.getElementsByTagName(‘head‘).item(0);    if (cssTag) head.removeChild(cssTag);    css = document.createElement(‘link‘);    css.href = http://www.mamicode.com/config.path + config.name +".css";    css.rel = ‘stylesheet‘;    css.type = ‘text/css‘;    css.id = ‘loadCss‘;    head.appendChild(css);    //添加js文件    var scriptTag = document.getElementById(‘loadScript‘);    var num = document.getElementsByTagName(‘head‘).item.length;    var head = document.getElementsByTagName(‘head‘).item(0);    if (scriptTag) head.removeChild(scriptTag);    script = document.createElement(‘script‘);    script.src = http://www.mamicode.com/config.path + config.name +".js";    script.type = ‘text/javascript‘;    script.id = ‘loadScript‘;    head.appendChild(script);}

文件路径截图:

技术分享

 

动态添加div及对应的js、css文件