点击button顺序生成li并把input里面的值变成li的内容

最新推荐文章于 2022-11-11 12:16:40 发布

koukou0419

最新推荐文章于 2022-11-11 12:16:40 发布

阅读量719

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/koukou0419/article/details/80691521

版权

前端专栏收录该内容

72 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin:0px;
	    	padding:0;
	    }
		.active{
			border:1px solid red;
			width:100px;
			height:50px;		
		}
		
		div{
			width:900px;
			height:350px;
			margin-top: 100px;
			margin-left:200px;
		}
		ul{
			width:500px;
			height:300px;
			border:1px solid black;
           
		}
	</style>
		
</head>
<body>
	
	<div>
		<input type="text">
       <input type="button" value="创建">
		<ul>
		
		</ul>

	</div>
	
	<script>
		window.onload=function(){
			var oInput=document.getElementsByTagName('input')[0];

			var bn1=document.getElementsByTagName('input')[1];
			var oUl=document.getElementsByTagName('ul')[0];
			bn1.onclick=function(){
				var oLi=document.createElement('li');
				//oUl.appendChild(oLi);//生成一个li插入到ul中，但是是插入到原有li的后面
				oLi.className='active';
				oLi.innerHTML=oInput.value;

				//插入到原有li的前面先获取里面所有的li
				//放到第一个li前面
				//兼容IE当ul里面没有li时候直接插入
				var aLi=document.getElementsByTagName('li');
				if(aLi.length>0){
				   oUl.insertBefore(oLi,aLi[0]);
			    }else{
			    	oUl.appendChild(oLi);
			    }
				
				
			}
			
		}


	    
	</script>
		
		
</body>
</html>

koukou0419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击button顺序生成li并把input里面的值变成li的内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...
复制链接

扫一扫