动态创建、移除元素

最新推荐文章于 2024-08-21 10:45:58 发布

weixin_34376986

最新推荐文章于 2024-08-21 10:45:58 发布

阅读量158

点赞数

文章标签：游戏 xhtml

原文链接：https://my.oschina.net/enfp/blog/659233

版权

为什么80%的码农都做不了架构师？>>>

动态创建的概念：

通过在js中创建、移除元素(有些书上也称为节点)，实现动态的创建元素，需要什么元素通过调用document的createElement方法来创建具有指定标签的DOM对象然后通过调用某个元素的appendChild()方法将新创建元素添加到相应的元素下。

常用的方法：

createElement(‘element’);创建一个元素(节点)
appendChild(node); 追加一个元素(节点)
removeChild(node);移除一个元素(节点)
replaceChild(new,old);替换一个元素(节点)
insertBefore(new,参照);把节点加到前面（插到某个节点前面）
元素对象.firstChild返回元素对象中的第一个元素
元素对象.lastChild返回元素对象中的最后一个元素

动态创建、删除元素代码：

<!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>
/*点击一个按钮创建一个层，点击创建一个按钮将创建一个按钮并且追加到
之前创建的层中，再添加文本框，要求插入到这个层的首部(也就是每次往这个层的第一个位置插入)
点击删除元素按钮，删除层中的所有元素*/

	//页面加载完成后执行
	onload=function(){
		//创建第一个按钮的onclick事件
		document.getElementById('btn1').onclick=function(){
			//document.createElement('标签名')创建一个指定标签名的元素(节点)返回该元素的对象
			//创建一个层//通过if语句限制只能创建一个层
			if(!document.getElementById('dv')){
				var divObj = document.createElement('div');
				//为创建的层添加样式
				divObj.id='dv';/*添加id*/
				divObj.style.width='300px';
				divObj.style.height='300px';
				divObj.style.backgroundColor='#333333';
			}
			
			//调用某个元素的appendChild(元素对象)将新创建的元素追加到相应的标签下
			//将层追加到body中
			document.body.appendChild(divObj);
		};

		var i=0;//后面用于创建按钮的value值
		//创建第二个按钮的onclick事件
		document.getElementById('btn2').onclick=function(){
			i++;
			//创建一个按钮
			var inputObj = document.createElement('input');
			inputObj.type='button';
			inputObj.value='按钮'+i;
			
			//将新创建的元素追加到层中
			document.getElementById('dv').appendChild(inputObj);
		};
		
		//创建第三个按钮的onclick事件
		document.getElementById('btnInsert').onclick=function(){
			i++;
			//创建文本框
			var txtObj = document.createElement('input');
			txtObj.type='text';
			txtObj.value='文本框'+i;
			
			将新创建的元素追加到层开始位置
			var divObj = document.getElementById('dv');
			//每次插入到第一个元素的前面
			divObj.insertBefore(txtObj,divObj.firstChild);
		};
		
		//创建第四个按钮的onclick事件
		document.getElementById('btnRemove').onclick=function(){
			//获取层对象
			var divObj = document.getElementById('dv');
			//divObj.firstChild判断层中是否有第一个元素
			while(divObj.firstChild){
				//移除元素
				divObj.removeChild(divObj.firstChild);
			};
			
		};
	};
</script>
</head>
<body>
	<input type="button" value="创建一个层" id="btn1" />
	<input type="button" value="创建一个按钮" id="btn2" />
	<input type="button" value="插入一个文本框" id="btnInsert" />
	<input type="button" value="删除一个按钮" id="btnRemove" />
	
</body>
</html>

转载于:https://my.oschina.net/enfp/blog/659233