JS动态创建DOM元素的⽅法
本⽂实例讲述了JS动态创建DOM元素的⽅法。分享给⼤家供⼤家参考。具体如下：
近⽇，因⼯作需要，需要通过点击某个元素后，动态创建⼀个DOM元素并显⽰，因此写了⼀些相关的JS函数，在此记录，以作备忘：/*
动态创建DOM元素的相关函数⽀持
*/
/*
获取以某个元素的DOM对象
@obj 该元素的ID字符串
*/
function getElement(obj)
{
return typeof obj=='string'?ElementById(obj):obj;
}
/*
获取某个元素的位置
@obj 该元素的DOM对象，或该元素的ID
*/
function getObjectPosition(obj)
{
obj=typeof obj==='string'?getElement(obj):obj;
if(!obj)
{
js教程removechild
return;
}
var position='';
BoundingClientRect) //For IEs
{
BoundingClientRect();
return {x:position.left,p};
}
else BoxObjectFor)
{
BoxObjectFor(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)
{
veEventListener)
{
}
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:'lor',attrValue:'red'}]
@eventRegisters 为被创建的对象添加事件，类似[{eventType:'click',eventHandler:adsfasdf}]的数组
-经过组合后，该参数具有如下形式:
{parentNode:document.body,domTag:'div',content:'这是测试的',otherAttributes:[{attrName:'lor',attrValue:'red'}],eventRegisters:[{eventType:'click',eventHandler:fnHandler}]} */
function dynCreateDomObject(domParams)
{
if(getElement(domParams.domId))
{
childNodeAction('remove',domParams.parentNode,domParams.domId);
}
var ateElement(domParams.domTag);
with(dynObj)
{
//id也可以通过otherAttributes传⼊，但是出于ID的特殊性，此处仍然采⽤
//JSON对象传⼊，并以DOM ID属性附件
id=domParams.domId;
t;
//innerHTML是DOM属性，⽽id等是元素属性，注意区别
}
/*添加属性*/
if(null!=herAttributes)
{
for(var i=0;i&herAttributes.length;i++)
{
var otherAttribute =herAttributes[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 LowerCase();
if( null==actionType || action.length<=0 || action=='append')
{
action='parentNode.appendChild';
}
else
{
action='veChild';
}
{
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','')
//的形式来指定style没有效果，只能通过如下形式,jiong
newHtmlDom.style.zIndex='8888';
newHtmlDom.style.position='absolute';
newHtmlDom.style.left='100px';
p='200px';
希望本⽂所述对⼤家的javascript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。