通过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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
微信小程序实现列表左右滑动
Nov 19 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/11/27 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php实现的RSS生成类实例
2015/04/23 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
Python语言描述最大连续子序列和
2017/12/05 Python
python多进程控制学习小结
2018/10/31 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python创建子类的方法分析
2019/11/28 Python
Python class的继承方法代码实例
2020/02/14 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
物业招聘计划书
2014/01/10 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
房屋转让协议书
2014/04/11 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
医生个人年度总结
2015/02/28 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记