JavaScript实现增加和删除节点的一个实例

现在的位置: 首页＞JavaScript＞正文

上篇下篇

JavaScript实现增加和删除节点的一个实例

2010年08月26日 ⁄ JavaScript ⁄ 评论数 1 ⁄ 被围观 1,041+

      前不久因工作需要做了个节点操作的JavaScript效果，网上也有很多更强大的实现增加和删除节点功能的实例。本例只供网友学习交流用，有疑问或者更好的办法可以给我留言。

节点操作：
      增加节点：createElement
      显示节点：appendChild
      删除节点：removeChild
本例实用性应该还是比较强，个人还加了个节点数量判断，以及赋予每个新增节点id，便于后台数据操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript实现增加和删除节点的一个实例</title> <style type="text/css"> *{ padding:0; margin:0; list-style-type:none;} body{font-family: "宋体";font-size: 12px;} .zfk_tyk{ width:660px; overflow:hidden;border:1px #ccc solid; margin:10px auto auto auto;display:block;} .zfk_tyk span{ padding-right:20px;} .zfk_tyk .zfk_c1{ padding:10px 0px 10px 20px; font-size:14px; font-weight:bold;} .zfk_tyk .zfk_c1 span input{ width:160px; height:20px; border:1px #7f9db9 solid; vertical-align:middle; line-height:20px; padding-left:2px;} .bot{ height:25px; background-color:#CCC; border:0; padding:0px 12px;_padding:0px 6px;} .addbot{ width:660px; margin:20px auto;} </style> <script language="javascript" type="text/javascript"> var divs=0; function createDiv(){ var newDiv = document.createElement("li"); newDiv.id = "div_" + divs; divs++; newDiv.className = "zfk_tyk"; newDiv.innerHTML = "<p class='zfk_c1'><span>体验卡号：<input name='' type='text' /></span><span>密码：<input name='' type='text' /></span> <input type='button' value='使用' class='bot'/>　<input type='button' class='bot' value='取消' onclick='removeDiv(this)' /></p>"+"<p class='zfk_c2'></p>" //+newDiv.id; document.getElementById("newdiv").appendChild(newDiv); //显示到指定地方 if(document.getElementById("checknum").getElementsByTagName("li").length>3){ alert("最多支持5张体验卡支付！"); document.getElementById("sd").style.display = "none"; } } function removeDiv(obj){ var newDiv = document.createElement("li"); var tdiv = obj.parentNode.parentNode; document.getElementById("newdiv").removeChild(tdiv); if(tdiv.getElementsByTagName("li").length<3){ document.getElementById("sd").style.display = "block"; } } </script> </head> <body> <div id="checknum"> <div class="zfk_tyk"> <p class="zfk_c1"><span>体验卡号：<input name="" type="text" /></span><span>密码：<input name="" type="text" /></span> <input type="button" value="使用" class="bot"/>　<input type="button" class="bot" value="取消" /></p> <p class="zfk_c2"></p> </div> <ul id="newdiv"></ul> <div class="addbot"><input type="button" class="bot" value="增加其他卡" id="sd" onclick="createDiv()" /></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。