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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
js 操作select相关方法函数
Dec 06 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
vue中添加与删除关键字搜索功能
Oct 12 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 class类的用法详细总结
2013/10/17 PHP
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Django对models里的objects的使用详解
2019/08/17 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
C语言笔试题回忆
2015/04/02 面试题
教师师德师风整改措施
2014/10/24 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书