动态添加div及对应的jscss文件

Posted 东腾的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动态添加div及对应的jscss文件相关的知识,希望对你有一定的参考价值。

动态添加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);
}

文件路径截图:

 

以上是关于动态添加div及对应的jscss文件的主要内容,如果未能解决你的问题,请参考以下文章

原生JS动态加载JSCSS文件及代码脚本

动态加载jscss 代码

动态加载jscss 代码

vue中动态添加div

js 动态添加元素(div、li、img等)及设置属性的方法

JS动态引入jsCSS动态创建script/link/style标签