js简易留言板

最新推荐文章于 2021-12-26 10:18:35 发布

火星土豆饼

最新推荐文章于 2021-12-26 10:18:35 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/weixin_43412366/article/details/104955668

版权

刚学了javascript的dom,可以利用元素操作和节点操作做一个简易的留言板
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
        <title>Document</title>
            <style>
                 textarea{
                      width: 200px;
                      height: 100px;            
                      margin-left: 50px;        
                 }
                 li{
                      background-color: rgb(109, 202, 202);           
                      margin-bottom: 5px;            
                      width: 300px;            
                      list-style-type: none;        
                      }        
                 button{            
                     margin-left: 50px;                    
                     }        
                 a{            
                    float: right;            
                    text-decoration: none;        
                    }    
                    </style>
               </head>
 <body>    
 	<textarea></textarea><br>    
 	<button>发布</button>    
 	<ul></<ul>
 	</body>
 </html>
<script>    
	var num = document.querySelector('textarea');    
	var but= document.querySelector('button');    
	var ul = document.querySelector('ul');   
	 //注册事件    
	but.onclick = function(){        
	if(num.value == ''){            
		alert('您没有输入内容');        
	}else{        
		// 创建节点           
		var li = document.createElement('li');        
		//赋值  javascript:;设置不跳转      
		li.innerHTML = num.value +"<a href= 'javascript:;'>删除</a>";         	
		//添加节点         
		//ul.appendChild(li);        
		ul.insertBefore(li,ul.children[0]);        
		var a = document.querySelectorAll('a');        
		for(var i=0;i<a.length;i++){            
			a[i].onclick = function(){                
				ul.removeChild(this.parentNode);            
			}        
		}        
	}   
}
</script>

火星土豆饼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简易留言板

刚学了javascript的dom,可以利用元素操作和节点操作做一个简易的留言板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> ...
复制链接

扫一扫