How to create DOM elements dynamically by JS

This article describes the method of dynamically creating DOM elements by JS. Share it for your reference. The details are as follows:

Recently, due to work needs, I need to click on an element and dynamically create a DOM element and display it. Therefore, I wrote some related JS functions and recorded it here to make a memo:

/*
 Support for dynamically creating related functions for DOM elements
 */
/*
 Get the DOM object with an element
 @obj The ID string of the element
 */
function getElement(obj)
{
  return typeof obj=='string'?(obj):obj;
}
/*
 Get the location of an element
 @obj DOM object of the element, or the ID of the element
 */
function getObjectPosition(obj)
{
  obj=typeof obj==='string'?getElement(obj):obj;
  if(!obj)
  {
   return;
  } 
  var position='';
  if() //For IEs
  {
   position=();
   return {x:,y:};
  }
  else if()
  {
   position=(obj);
   return {x:,y:};
  }
  else
  {
   position={x:,y:};
   var parent=;
   while(parent)
   {
    +=;
    +=;
    parent=;
   }
   return position;
  }
}
/*
 Dynamically bind events for a DOM object
 @oTarget DOM object of bound event
 @sEventType The bound event name, note that the event name without adding on is, such as 'click'
 @fnHandler The bound event handler function
 */
function addEventHandler(oTarget, sEventType, fnHandler)
{
   if () 
   {
     (sEventType, fnHandler, false);
   } 
   else if () //for IEs
   {
     ("on" + sEventType, fnHandler);
   } 
   else 
   {
     oTarget["on" + sEventType] = fnHandler;
   }
}
/*
 Remove an event from a DOM object
 @oTarget DOM object of bound event
 @sEventType The bound event name, note that the event name without adding on is, such as 'click'
 @fnHandler The bound event handler function
 */
function removeEventHandler(oTarget,sEventType,fnHandler)
{
   if() 
   {
    (sEventType,fnHandler,false)
   }
   else if() //for IEs
   {
    (sEventType,fnHandler);
   }
   else
   {
    oTarget['on'+sEventType]=undefined;
   }
}
/*
 Create dynamic DOM objects
 @domParams is a JSON expression of the attributes of the created object, which has the following properties:
 @parentNode The parent element to which the created object belongs (can be element ID or DOM object)
 @domId The ID of the object being created
 @domTag The tag name of the created object, supports commonly used layout elements, such as div span, etc., but does not support special elements such as input\form
 @content The created object content
 @otherAttributes Add other attributes to the created object except the required attributes of the function, such as [{attrName:'',attrValue:'red'}]
 @eventRegisters Add events to the created object, an array similar to [{eventType:'click',eventHandler:adsfasdf}]
 -After combining, the parameter has the following form:
 {parentNode:,domTag:'div',content:'This is tested',otherAttributes:[{attrName:'',attrValue:'red'}],eventRegisters:[{eventType:'click',eventHandler:fnHandler}]}
 */
function dynCreateDomObject(domParams)
{ 
  if(getElement())
  {
   childNodeAction('remove',,);
  }
  var dynObj=();
  with(dynObj)
  {  
  //id can also be passed in through otherAttributes, but due to the speciality of ID, it is still used here  //JSON object is passed in and attached with DOM ID attribute   id=;
   innerHTML=;
   //innerHTML is a DOM attribute, while id etc. are element attributes, pay attention to the difference  }
  /*Add attribute*/
  if(null!=)
  {
   for(var i=0;i&lt;;i++)
   {    
    var otherAttribute =[i];
    (,);
   }
  }
  /*end Add attribute*/
  /*Add related events*/
  if(null!=)
  {
   for(var i=0;i&lt;;i++)
   {
    var eventRegister =[i];    
    addEventHandler(dynObj,,);
   }
  }
  /*end Add related events*/ 
  try
  {   
    childNodeAction('append',,dynObj);
  }
  catch($e)
  {
  } 
  return dynObj;
}
/*
 Delete child nodes from parent node
 @actionType defaults to append, input string append | remove
 @parentNode The DOM object of the parent node, or the ID of the parent node
 @childNode The DOM object of the deleted child node or the ID of the deleted child node
 */
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=();
 if( null==actionType || &lt;=0 || action=='append')
 {
  action='';
 }
 else
 {
  action='';
 }
 
 try
 {
  eval(action)(childNode);
 }
 catch($e)
 {
  alert($);  
 }
}

Example of usage:

var htmlAttributes=
[
{attrName:'class',attrValue:'Style name' } //for IEs
,
{attrName:'className',attrValue: 'Style name'} //for ff
]  
var domParams={domTag:'div',content:'Dynamic div' innerHTML',otherAttributes:htmlAttributes};
var newHtmlDom=dynCreateDomObject(domParams);
//By setAttribute('style','position:absolute............')The // form to specify style has no effect, and can only be used in the following form, jiong='8888';
='absolute';
='100px';
='200px';

I hope this article will be helpful to everyone's JavaScript programming.