透过JS动态创造贰个html,删除节点的简要实例

时间:2019-07-25 12:39来源:亚洲城ca88唯一官方网站
近日,因工作需要,需要通过点击某个元素后,动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: 本文实例讲述了JS动态创建DOM元素的方法。分享给大家

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

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

js removeChild() 用法

<body> 
<p id="p1">welcome to <b>javascript</b> world !</p> 
<script language="javascript" type="text/javascript"> 
<!-- 
function nodestatus(node) 
{ 
 var temp=""; 
 if(node.nodeName!=null) 
 { 
  temp ="nodeName=" node.nodeName "n"; 
 } 
 else temp ="nodeName=null n"; 
 if(node.nodeType!=null) 
 { 
  temp ="nodeType=" node.nodeType "n"; 
 } 
 else temp ="nodeType=null n"; 
 if(node.nodeValue!=null) 
 { 
  temp ="nodeValue=" node.nodeValue "n"; 
 } 
 else temp ="nodeValue=null n"; 
 return temp; 
} 
var parent=document.getElementById("p1"); 
var msg="父节点 n" nodestatus(parent) "n"; 
//返回元素节点p的最后一个孩子 
last=parent.lastChild; 
msg ="删除之前:lastChild--" nodestatus(last) "n"; 
//删除节点p的最后一个孩子,变为b 
parent.removeChild(last); 
last=parent.lastChild; 
msg ="删除之后:lastChild--" nodestatus(last) "n"; 
alert(msg); 
--> 
</script> 
</body> 


<html>

<head>

<title>js控制添加、删除节点</title>

</head>
<script type="text/javascript">
  var all;
  function addParagraph() {
    all = document.getElementById("paragraphs").childNodes;
    var newElement = document.createElement("p");
    var seq = all.length   1;

    //创建新属性
    var newAttr = document.createAttribute("id");
    newAttr.nodeValue = "p"   seq;
    newElement.setAttribute(newAttr);

    //创建文本内容
    var txtNode = document.createTextNode("段落"   seq);

    //添加节点
    newElement.appendChild(txtNode);
    document.getElementById("paragraphs").appendChild(newElement);
  }
  function delParagraph() {
    all = document.getElementById("paragraphs").childNodes;
    document.getElementById("paragraphs").removeChild(all[all.length -1]);
  }
</script>
<style>
  p{
    background-color : #e6e6e6 ;
  }
</style>
<body>
<center>
  <input type="button" value="添加节点" onclick="addParagraph();"/>
  <input type="button" value="删除节点" onclick="delParagraph();"/>
  <div id="paragraphs">
    <p id="p1">段落1</p>
    <p id="p2">段落2</p>
  </div>
</center>
</body>

</html>
/**//* 
动态创建DOM元素的相关函数支持 
www.jcodecraeer.com 
*/ 
/**//* 
获取以某个元素的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等,但不支持inputform等特别的元素 
@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); 
} 
} 

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

以上这篇js操作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名称,支持常用的布局元素,如div span等,但不支持inputform等特别的元素 
@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);  
 }
}

您可能感兴趣的文章:

  • 详解JS获取HTML DOM元素的8种方法
  • JavaScript获取DOM元素的11种方法总结
  • 通过JS动态创建一个html DOM元素并显示
  • JS动态创建DOM元素的方法
  • 快速解决js动态改变dom元素属性后页面及时渲染的问题
  • JavaScript DOM元素尺寸和位置
  • JS选取DOM元素的简单方法
  • 原生JavaScript来实现对dom元素class的操作方法(推荐)
  • JS实现动态添加DOM节点和事件的方法示例
  • JavaScript DOM节点添加示例
  • JavaScript DOM元素常见操作详解【添加、删除、修改等】
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';

使用示例:

您可能感兴趣的文章:

  • 详解JS获取HTML DOM元素的8种方法
  • JavaScript获取DOM元素的11种方法总结
  • JS动态创建DOM元素的方法
  • 快速解决js动态改变dom元素属性后页面及时渲染的问题
  • JavaScript DOM元素尺寸和位置
  • JS选取DOM元素的简单方法
  • 原生JavaScript来实现对dom元素class的操作方法(推荐)
  • JS实现动态添加DOM节点和事件的方法示例
  • js操作DOM--添加、删除节点的简单实例
  • JavaScript DOM节点添加示例
  • 亚洲城ca88唯一官方网站,JavaScript DOM元素常见操作详解【添加、删除、修改等】
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程序设计有所帮助。

您可能感兴趣的文章:

  • 详解JS获取HTML DOM元素的8种方法
  • JavaScript获取DOM元素的11种方法总结
  • 通过JS动态创建一个html DOM元素并显示
  • 快速解决js动态改变dom元素属性后页面及时渲染的问题
  • JavaScript DOM元素尺寸和位置
  • JS选取DOM元素的简单方法
  • 原生JavaScript来实现对dom元素class的操作方法(推荐)
  • JS实现动态添加DOM节点和事件的方法示例
  • js操作DOM--添加、删除节点的简单实例
  • JavaScript DOM节点添加示例
  • JavaScript DOM元素常见操作详解【添加、删除、修改等】

编辑:亚洲城ca88唯一官方网站 本文来源:透过JS动态创造贰个html,删除节点的简要实例

关键词: 亚洲城ca88