HTML dom 字符串创建元素,JS动态创建DOM元素的方法

作者：McJeremy&Fan 字体： 类型：转载

这篇文章主要介绍了JS动态创建DOM元素的方法,涉及javascript动态创建DOM元素及DOM元素事件绑定与删除的相关技巧,需要的朋友可以参考下

本文实例讲述了JS动态创建DOM元素的方法。分享给大家供大家参考。具体如下：

近日，因工作需要，需要通过点击某个元素后， 动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘：

/*动态创建DOM元素的相关函数支持*//*获取以某个元素的DOM对象@obj 该元素的ID字符串*/function getElement(obj){ return typeof bj==‘string‘?document.getElementById(obj):obj;}/*获取某个元素的位置@obj 该元素的DOM对象，或该元素的ID*/function getObjectPosition(obj){ bj=typeof bj===‘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 = 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=undefined; }}/*创建动态的DOM对象@domParams是被创建对象的属性的JSON表达，它具有如下属性：@parentNode 被创建对象所属的父级元素(可为元素ID，也可为DOM对象)@domId 被创建对象的ID@domTag 被创建对象的tag名称，支持常用的布局元素，如div span等，但不支持input\form等特别的元素 @content 被创建的对象内容 @otherAttributes 为被创建的对象添加除函数必需的属性外其它属性,如@eventRegisters 为被创建的对象添加事件，类似的数组-经过组合后，该参数具有如下形式:{parentNode:document.body,domTag:‘div‘,content:‘这是测试的‘,otherAttributes:,eventRegisters:}*/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

使用示例：

var htmlAttributes= var 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‘;

希望本文所述对大家的javascript程序设计有所帮助。

内容由用户发布，不代表本站观点。如发现有害或侵权内容。请点击这里