通过点击某个元素后， 动态创建一个dom元素并显示，在此记录：
/**//*
动态创建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名称，支持常用的布局元素，如p span等，但不支持input\form等特别的元素
@content 被创建的对象内容
@otherattributes 为被创建的对象添加除函数必需的属性外其它属性,如[{attrname:'style.color',attrvalue:'red'}]
@eventregisters 为被创建的对象添加事件，类似[{eventtype:'click',eventhandler:adsfasdf}]的数组
-经过组合后，该参数具有如下形式:
{parentnode:document.body,domtag:'p',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:'p', content:'动态p的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动态创建dom元素完整代码和使用详解的详细内容。