动态添加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 = 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及对应的js、css文件的更多相关文章
- js动态添加Div
利用JavaScript动态添加Div的方式有很多,在这次开发中有用到,就搜集了一下比较常用的. 一.在一个Div前添加Div <html> <body> <div id ...
- JavaScript 动态添加div 绑定点击事件
1.动态添加div function cDiv(num){ var oDiv=document.createElement("div"); oDiv.className='divs ...
- ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
- Web性能优化之动态合并JS/CSS文件并缓存客户端
来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...
- js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- JS&CSS文件请求合并及压缩处理研究(五)
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...
随机推荐
- [js高手之路] es6系列教程 - 新的类语法实战选项卡
其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一.用es6封装一个基本的类 class Person{ constructor( ...
- Micro Templating源码分析
关于模板,写页面的人们其实一直在用,asp.net , jsp , php, nodejs等等都有他的存在,当然那是服务端的模板. 前端模板,作为前端人员肯定是多少有接触的,Handlebars.js ...
- thinkphp->add方法错误
$group_id=$model->add($add); 以上这句代码如果执行成功,返回它存储的id,但是,会有一种情况一直返回1. 代码完全没有问题,检查数据库发现有两个主键id,删除一个就O ...
- Nexus私服忘记用户名密码解决4步走
1 停止nexus服务 [root@node001 bin]# /usr/local/nexus/nexus-2.14.5-02/bin/nexus stop******************** ...
- Spring入门之IOC
IOC/DI: Spring最核心的灵魂,IOC/DI(控制反转/依赖注入)!,这里一定要理解他,理解这个思想.我会细说什么是IOC/DI.他的思想是什么.它带来了那些好处. 进入正题,先说说什么是i ...
- 初识Hibernate的主配置和映射配置
Hibernate.cfg.xml 主配置 Hibernate.cfg.xml 主配置文件夹中主要配置:数据库链接配置,其他参数配置,映射信息等. 常用配置查看源码: hibernate-distri ...
- RLP
** 原创勿转 ** 这是在看devp2p时看到的,英文原文地址:https://github.com/ethereum/wiki/wiki/RLP RLP: Recursive Length Pr ...
- Node.js学习笔记(三): 事件机制
大部分的nodejs核心api都建立在异步的事件驱动架构之上,所以events是Node.js 最重要的模块,它提供了唯一的接口.events 模块不仅用于用户代码与 Node.js 下层事件循环的交 ...
- [转]解析多级json数据为list中嵌套一级字典的形式
#!/usr/bin/env python # encoding: utf-8 import json def read(obj,key): collect = list() for k in obj ...
- 树莓派搭建WEB服务器
树莓派搭建WEB的教程网上有许多,但感觉每一篇都有一些问题,这次我将网上的教程汇总,并亲身实践,将注意的问题都写进去,方便新手学习! 目录:1,安装nginx+sqlite+php5打造轻量级服务器, ...