通過JS動態創建一個html DOM元素并顯示

2020-03-24 16:06:41

字體：大中小

來源：轉載

供稿：網友

近日，因工作需要，需要通過點擊某個元素后，動態創建一個DOM元素并顯示，因此寫了一些相關的JS函數，在此記錄，以作備忘：/**//* 動態創建DOM元素的相關函數支持 www.jcodecraeer.com /**//* 獲取以某個元素的DOM對象 @obj 該元素的ID字符串 function getElement(obj) return typeof obj=='string' document.getElementById(obj):obj; /**//* 獲取某個元素的位置 @obj 該元素的DOM對象，或該元素的ID function getObjectPosition(obj) obj=typeof obj==='string' getElement(obj):obj; if(!obj) return; var position=''; if(obj.getBoundingClientRect) //For IEs position=obj.getBoundingClientRect(); return {x:position.left,y:position.top}; else if(document.getBoxObjectFor) position=document.getBoxObjectFor(obj); return {x:position.x,y:position.y}; else position={x:obj.offsetLeft,y:obj.offsetTop}; var parent=obj.offsetParent; while(parent) position.x+=obj.offsetLeft; position.y+=obj.offsetTop; parent=obj.offsetParent; return position; /**//* 為某個DOM對象動態綁定事件 @oTarget 被綁定事件的DOM對象 @sEventType 被綁定的事件名，注意，不加on的事件名，如 'click' @fnHandler 被綁定的事件處理函數 function addEventHandler(oTarget, sEventType, fnHandler) if (oTarget.addEventListener) oTarget.addEventListener(sEventType, fnHandler, false); else if (oTarget.attachEvent) //for IEs oTarget.attachEvent("on" + sEventType, fnHandler); else oTarget["on" + sEventType] = fnHandler; /**//* 從某個DOM對象中去除某個事件 @oTarget 被綁定事件的DOM對象 @sEventType 被綁定的事件名，注意，不加on的事件名，如 'click' @fnHandler 被綁定的事件處理函數 function removeEventHandler(oTarget,sEventType,fnHandler) if(oTarget.removeEventListener) oTarget.removeEventListener(sEventType,fnHandler,false) else if(oTarget.detachEvent) //for IEs oTarget.detachEvent(sEventType,fnHandler); else oTarget['on'+sEventType]=undefined; /**//* 創建動態的DOM對象 @domParams是被創建對象的屬性的JSON表達，它具有如下屬性： @parentNode 被創建對象所屬的父級元素(可為元素ID，也可為DOM對象） @domId 被創建對象的ID @domTag 被創建對象的tag名稱，支持常用的布局元素，如div span等，但不支持input/form等特別的元素 @content 被創建的對象內容 @otherAttributes 為被創建的對象添加除函數必需的屬性外其它屬性,如[{attrName:'style.color',attrValue:'red'}] @eventRegisters 為被創建的對象添加事件，類似[{eventType:'click',eventHandler:adsfasdf}]的數組 -經過組合后，該參數具有如下形式: {parentNode:document.body,domTag:'div',content:'這是測試的',otherAttributes:[{attrName:'style.color',attrValue:'red'}],eventRegisters:[{eventType:'click',eventHandler:fnHandler}]} function dynCreateDomObject(domParams) if(getElement(domParams.domId)) childNodeAction('remove',domParams.parentNode,domParams.domId); var dynObj=document.createElement(domParams.domTag); with(dynObj) //id也可以通過otherAttributes傳入，但是出于ID的特殊性，此處仍然采用 //JSON對象傳入，并以DOM ID屬性附件 id=domParams.domId; innerHTML=domParams.content; //innerHTML是DOM屬性，而id等是元素屬性，注意區別 /**//*添加屬性*/ if(null!=domParams.otherAttributes) for(var i=0;i domParams.otherAttributes.length;i++) var otherAttribute =domParams.otherAttributes[i]; dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue); /**//*end 添加屬性*/ /**//*添加相關事件*/ if(null!=domParams.eventRegisters) for(var i=0;i domParams.eventRegisters.length;i++) var eventRegister =domParams.eventRegisters[i]; addEventHandler(dynObj,eventRegister.eventType,eventRegister.eventHandler); /**//*end 添加相關事件*/ childNodeAction('append',domParams.parentNode,dynObj); catch($e) return dynObj; /**//* 從父結點中刪除子結點 @actionType 默認為append,輸入字符串 append | remove @parentNode 父結點的DOM對象，或者父結點的ID @childNode 被刪除子結點的DOM對象或者被刪除子結點的ID function childNodeAction(actionType,parentNode,childNode) if(!parentNode) {return; }
parentNode=typeof parentNode==='string' getElement(parentNode):parentNode; childNode=typeof childNode==='string' getElement(childNode):childNode; if(!parentNode || !childNode) {return;} var action=actionType.toLowerCase(); if( null==actionType || action.length =0 || action=='append') action='parentNode.appendChild'; else action='parentNode.removeChild'; eval(action)(childNode); catch($e) alert($e.message); 使用示例：var htmlAttributes= {attrName:'class',attrValue:'樣式名稱'} //for IEs{attrName:'className',attrValue: '樣式名稱'} //for ffvar domParams={domTag:'div', content:'動態div的innerHTML', otherAttributes:htmlAttributes};var newHtmlDom=dynCreateDomObject(domParams);//通過setAttribute('style','position:absolute.....................')//的形式來指定style沒有效果，只能通過如下形式,jiongnewHtmlDom.style.zIndex='8888';newHtmlDom.style.position='absolute';newHtmlDom.style.left='100px';newHtmlDom.style.top='200px';更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：推薦8篇html5+JavaScript實例教程

下一篇：使用javascript和HTML5 Canvas畫的四漸變色播放按鈕效果