動態添加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); }
文件路徑截圖:
