JS实现动态添加和删除DIV

原创 2013年12月03日 11:32:50

前言


在做项目的过程中,做到关于添加个人的教育这一块的时候,需要使用动态添加和删除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节点之间的调用的和传值。还是挺有收获。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

原生js怎么删除一个 div

增加删除DIV的JS写法 111 222 var box = document.getElementById("box"); var main = document.get...

点击按钮移除整个DIV

点击图片中的X号移除这块DIV jsp页面代码: c:forEach var="list" items="${editList}"> div class="appmsg_item"> ...

javascript怎么清空一个div里面的内容

document.getElementById('BIGDraw').innerHTML = ""; 清空div内容

js动态创建和删除div

研究了一下js的动态生成div功能。特此一记: var i=1; function cDiv(){ var oDiv=document.createElement("div"); oDiv.styl...

js动态删除div元素

在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成。用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示。所以考虑到用js来搞...

用jquery在div中动态添加/删除元素

$(document).ready(function(){ $("#append").click(function(){ var p = "This is append p";//添加元素...

JS动态添加div,然后在div中添加元素

需求:    组织部中有个这样的需求,根据年份动态显示该年份下的定性指标!   我的做法:         先是放一个空的div,让后根据指标的数据,动态的往div中添加元素。 代码:  空的d...

javascript动态添加div

网上有很多的实现js动态添加div的方法,在这里我展示一种使用insertBefore(),和innerHTML方式。 前台代码 js动态添加div 获得question下的...

js动态添加div(一)

利用JavaScript动态添加Div的方式有很多,一下是个比较常用的。 一、在一个Div前添加Div            1     2                  test      ...

动态加载div动态加载tr动态加载ul

去掉相应的注释,动态加载才能用,它们都是一个原理         Dfenye.html            //动态加载tr        /*  functi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS实现动态添加和删除DIV
举报原因:
原因补充:

(最多只允许输入30个字)