通过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 相关文章推荐
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue计算属性及使用详解
Apr 02 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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生成WAP页面
2006/10/09 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
jquery form 加载数据示例
2014/04/21 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
python保存数据到本地文件的方法
2018/06/23 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Python如何输出警告信息
2020/07/30 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
Ibatis如何使用动态表名
2015/07/12 面试题
入股合作协议书
2014/10/12 职场文书
人事任命通知书
2015/04/21 职场文书
辩论赛新闻稿
2015/07/17 职场文书
简短清晨问候语
2015/11/10 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android