通过JS动态创建一个html DOM元素并显示


Posted in Javascript onOctober 15, 2014

近日,因工作需要,需要通过点击某个元素后, 动态创建一个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 添加相关事件*/ 
try 
{ 
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'; 
} 

try 
{ 
eval(action)(childNode); 
} 
catch($e) 
{ 
alert($e.message); 
} 
}

使用示例:

var htmlAttributes= 
[

{attrName:'class',attrValue:'样式名称'} //for IEs

,

{attrName:'className',attrValue: '样式名称'} //for ff

] 

var domParams={domTag:'div', content:'动态div的innerHTML', otherAttributes:htmlAttributes};

var newHtmlDom=dynCreateDomObject(domParams);

//通过setAttribute('style','position:absolute.....................')

//的形式来指定style没有效果,只能通过如下形式,jiong

newHtmlDom.style.zIndex='8888';

newHtmlDom.style.position='absolute';

newHtmlDom.style.left='100px';

newHtmlDom.style.top='200px';
Javascript 相关文章推荐
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
深入理解Vue 组件之间传值
Aug 16 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
javascript模拟实现ajax加载框实例
Oct 15 #Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 #Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 #Javascript
js实现select组件的选择输入过滤代码
Oct 14 #Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 #Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 #Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
JS 判断代码全收集
2009/04/28 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
火车票抢票python代码公开揭秘!
2018/03/08 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python标准库os库的函数介绍
2020/02/12 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
大学生演讲稿范文
2014/01/11 职场文书
满月酒答谢词
2014/01/14 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS