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

最新推荐文章于 2022-08-02 22:29:40 发布

会做饭的技术男

最新推荐文章于 2022-08-02 22:29:40 发布

阅读量342

点赞数

分类专栏：前端文章标签： javascript

原文链接：https://www.mk2048.com/blog/blog.php?id=hjaihki21a2j&title=%E5%8A%A8%E6%80%81%E6%B7%BB%E5%8A%A0div%E5%8F%8A%E5%AF%B9%E5%BA%94%E7%9A%84js%E3%80%81css%E6%96%87%E4%BB%B6

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

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