码迷,mamicode.com
首页 > 其他好文 > 详细

添加标签和删除标签

时间:2015-05-24 18:42:08      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:

邮箱中邮件,博客园中的博客都有类似的行为

<!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>
<script>
window.onload=function ()
{
	var oUl=document.getElementById("ul1");
	var oTxt=document.getElementById(‘txt1‘);
	var oBtn=document.getElementById(‘btn2‘);
	oBtn.onclick=function ()
	{
		var oLi=document.createElement(‘li‘);
		var aLi=oUl.getElementsByTagName(‘li‘);
		oLi.innerHTML=oTxt.value+‘<a href="javaScript:;" >删除</a>‘;//将框中的内容添加到插入的li标签中,在添加一个删除链接
		//将oLi添加到oUl标签中
		if(aLi.length==0){
			oUl.appendChild(oLi);//如果是第一个li标记,直接添加
		}else
		{
			oUl.insertBefore(oLi,aLi[0]);//如果已经有li标记,在第一个位置插入
		}
		var aA=oUl.getElementsByTagName(‘a‘);//得到a标签
		for(var i=0;i<aA.length;i++)//对每个a标记进行操作
		{
			aA[i].onclick=function ()//对每个a标记创建单击事件
			{
				oUl.removeChild(this.parentNode);//当点击删除时,删除父节点
				
			}
		}
	}
	
	
	
}
</script>
</head>

<body>
<input id="txt1"  type="text" />
<input id="btn2"type="button" value="创建"/>
<ul id="ul1">

</ul>
</body>
</html>

 

添加标签和删除标签

标签:

原文地址:http://www.cnblogs.com/lzzhuany/p/4526119.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!