通过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实现客户端表格的分页、排序功能代码
Mar 16 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 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
jQuery 源码分析笔记
2011/05/25 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
jQuery插件扩展测试实例
2016/06/21 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
three.js实现圆柱体
2018/12/30 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
python getopt详解及简单实例
2016/12/30 Python
Python中查看文件名和文件路径
2017/03/31 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
中专生自荐信
2013/10/12 职场文书
科技节口号
2014/06/19 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
教师培训学习心得体会
2016/01/21 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js