JS动态创建DOM元素的方法


Posted in Javascript onJune 09, 2015

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

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

/*
动态创建DOM元素的相关函数支持
*/
/*
获取以某个元素的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 相关文章推荐
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
javascript代码加载优化方法
Jan 30 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
Validform表单验证总结篇
Oct 31 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 #Javascript
JavaScript获取两个数组交集的方法
Jun 09 #Javascript
JavaScript实现函数返回多个值的方法
Jun 09 #Javascript
JavaScript中的getDay()方法使用详解
Jun 09 #Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 #Javascript
JavaScript的Date()方法使用详解
Jun 09 #Javascript
Javascript监视变量变化的方法
Jun 09 #Javascript
You might like
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python安装twisted的问题解析
2018/08/21 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
《小池塘》教学反思
2014/02/28 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
六查六看自查报告
2014/10/14 职场文书
成本会计实训报告
2014/11/05 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
捐书活动倡议书
2015/04/27 职场文书
郭明义电影观后感
2015/06/08 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android