html添加删除

最新推荐文章于 2023-07-09 22:01:04 发布

原创最新推荐文章于 2023-07-09 22:01:04 发布 · 682 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html添加删除 #html #url #表单

HTML 专栏收录该内容

2 篇文章

订阅专栏

<!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 type="text/javascript">
	// 新增
	function news(){
		// 获得父级标签集合就是ul只有一个所以.item(0)就拿到第一个元素
		var parent = document.getElementsByTagName("ul").item(0);
		// 同上
		var son = document.getElementsByTagName("li").item(0);
		// 克隆li所有子元素（true）false只客隆li
		var sons = son.cloneNode(true);
		// 创建一个新元素br就是加一个换行
		var br_n =document.createElement("br");
		// 追加到父级元素里
		parent.appendChild(sons);
		parent.appendChild(br_n);	
	}
	// 删除
	function dele(){
		var parent = document.getElementsByTagName("ul").item(0);
		var son = document.getElementsByTagName("li").item(1);
		var br_n = document.getElementsByTagName("br").item(1);
		// 父级元素删除子元素
		parent.removeChild(son);
		parent.removeChild(br_n);
	}
</script>
</head>
<body>
	<input type="button" value="新增" onclick="news();" />
    <input type="button" value="删除" onclick="dele();" />
	<ul>
    	<li><input style="color:#CCC;" type="text" value="请输入内容" /></li><br />
    </ul>
</body>
</html>