JS实现动态添加和删除DIV
前言
在做项目的过程中,做到关于添加个人的教育这一块的时候,需要使用动态添加和删除div的操作。这个大家应该不陌生,在很多网站注册的时候都会要求对于自己的教育的经历进行完善。如下图
实例
工具:Dreamweaver firefox chrome
Html
<!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>经历</title> <link href="个人资料.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="father"> <div id="parentpoint"> <div id="college" name="college"> <p><span >大学</span> <input name="univ_name_0" height="20" tabindex="1" value="廊坊师范" id="univ_name_0" type="text"> 入学年份 <select name="univ_year_0" tabindex="2" id="univ_year_0" > <option value="0">入学年份</option> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> </select> </p> <p> 身 份 <select name="univ_type_0" tabindex="3" id="univ_type_0" > <option value="">请选择类型</option> <option value="大学生">大学生</option> <option value="硕士">硕士</option> <option value="博士">博士</option> <option value="校工">校工</option> <option value="教师">教师</option> </select> <span> 院系 </span> <span id="univDormComponent_Span1"> </span> <select id="univ_name_0_dept" name="department1" tabindex="4" title="生命科学学院"> <option value="">院系</option> <option value="体育学院">体育学院</option> <option value="化学与材料科学学院">化学与材料科学学院</option> <option value="外国语学院">外国语学院</option> <option value="建筑工程学院">建筑工程学院</option> <option value="心理系">心理系</option> <option value="教育学院">教育学院</option> <option value="数学与信息科学学院">数学与信息科学学院</option> <option value="文学院">文学院</option> <option value="物理与电子信息学院">物理与电子信息学院</option> <option selected="selected" value="生命科学学院">生命科学学院</option> <option value="社会发展学院">社会发展学院</option> <option value="管理学院">管理学院</option> <option value="经济学院">经济学院</option> <option value="美术学院">美术学院</option> <option value="音乐学院">音乐学院</option> <option value="其它院系">其它院系</option> </select> <div id="remove" name="div" href="#" onclick="DeleteCollegeDiv(this)">删除</div></p> <p> <a id="remove_univ_0" href="#nogo" onclick="AddCollegeDiv('college')">添加大学</a></p> </div> </div>
js
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" > //动态生成和删除大学教育经历的div var collegediv =1; var collegename=1; //生成大学教育div function AddCollegeDiv(strid){ var o=document.getElementById(strid); var div=document.createElement("div"); div.id = "college"+ collegediv; var deletediv=document.createElement("div"); //拿到删除按钮的id并加1 var deletename=o.childNodes.item(4).id+1; <!--div.innerHTML=o.innerHTML.replace(/\{0\}/ig,a);--> //将现有的divhtml赋值给新创建的div div.innerHTML=o.innerHTML; document.getElementById("parentpoint").appendChild(div); //给新的div的删除按钮赋值(动态加1) div.childNodes.item(4).id=deletename; collegediv++; collegename++; } //动态删除大学教育经历div function DeleteCollegeDiv(obj) { <!--var strid=obj.name;--> //获取本删除按钮的id值,并创建对象 var strid=obj.id; var o=document.getElementById(strid); var z=o.parentElement; <!--var o=document.getElementsByTagName(strid)[4].parentElement;--> //找到这个删除按钮对应的父div的值 <!--var stridone=document.getElementsByName(strid)[0].parentNode.id;--> var stridone=z.id; //判断本id对应的值并删除 var my = document.getElementById(stridone); if (my != null){ my.parentNode.removeChild(my);} <!--window.location.reload(); --> } var highschooldiv =1; var deletehighschool=1; //动态生成和删除高中教育经历div function AddHSDiv(hcId){ var o=document.getElementById(hcId); var div=document.createElement("div"); div.id = "HighShool"+ highschooldiv; var deletediv=document.createElement("div"); //拿到删除按钮的id并加1 var deletename=o.childNodes.item(4).id+1; <!--div.innerHTML=o.innerHTML.replace(/\{0\}/ig,a);--> //将现有的divhtml赋值给新创建的div div.innerHTML=o.innerHTML; document.getElementById("parentpointHS").appendChild(div); //给新的div的删除按钮赋值(动态加1) div.childNodes.item(4).id=deletename; highschooldiv++; deletehighschool++; } </script>
效果
添加前
这里大家可以看到,添加前这里只存在一个id为college的div块
添加后
与上图相比这里就动态添加了一个id为"college1div"块了.删除虽有不同,大致思路一致。
总结
这里主要涉及到的一些思路的问题
1.只用两个函数来实现动态删除,就需要每次点击添加时,自动调用本div的id号
这里用this解决,直接onclick="DeleteCollegeDiv(this)"。这样就很好的维护了点击本
身按钮来传值。虽然很简单的知识,很实用。
2.如何来调用本身div的子div与div的问题
这里使用childNode和pareentElement和索引来解决,但是还是会出现问题,(目前测试没有问题)。这是因为/n这个转义字符的原因,由于浏览器解析的方式不同会导致索引发生变化。当
然也是有办法,这里先不说了。
总的来讲,这个东西花费了一些时间。主要是思路上的问题以及怎么在dom节点之间的调用的和传值。还是挺有收获。