动态添加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 = 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 = config.path + config.name + ".js";
script.type = 'text/javascript';
script.id = 'loadScript';
head.appendChild(script);
}
文件路径截图:
