您的位置：首页 > Web前端 > JavaScript

JS实现动态添加和删除DIV

2013-12-03 11:32 966 查看
前言

在做项目的过程中，做到关于添加个人的教育这一块的时候，需要使用动态添加和删除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节点之间的调用的和传值。还是挺有收获。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航