js留言板

最新推荐文章于 2022-08-26 11:59:07 发布

吴恒利

最新推荐文章于 2022-08-26 11:59:07 发布

阅读量570

点赞数 1

本文链接：https://blog.csdn.net/a2QWSDN/article/details/89681293

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>留言板</title>
</head>
<style type="text/css">
	*{
		list-style: none;
	}
</style>
<body>
	<ul id="items"></ul>
	<textarea name="" id="text" cols="30" rows="10"></textarea>
	<button id="btn">点击留言</button>
</body>

 <script type="text/javascript">
    btn.onclick=function(){
    	//点击事件
   var li=document.createElement("li");
   //创建li
   var val=text.value;
       //var一个用来放文本域的内容
   var span=document.createElement("span");
    //创建span标签
   
        items.appendChild(li)
        //li放进ul里面
    	li.appendChild(span)
    	//span放进li里面
    	span.innerHTML=val;
    	//span的内容等于val
    	text.value=""
          //文本域的内容放进span里面，文本域的值清空
    var sc=document.createElement("button")
       //创建一个按钮
        sc.innerHTML="删除";
        //按钮名字
        li.appendChild(sc)
        //按钮插入到li里面
        sc.onclick=function(){
        	//点击事件
        	items.removeChild(li)
        	//ul删除li文本内容
        }
     var xg= document.createElement("button");
      //在创建一个修改内容
         li.appendChild(xg)
         // 按钮插入到li里面
         xg.innerHTML="修改"
         xg.onclick=function(){
         	//点击修改按钮。span内容为空
         	 span.innerHTML=""
         	var model=prompt("请输入修改内容")
         	//弹出弹框，输入修改内容
           
           span.innerHTML=model
           //span的新内容等于输入的内容
         }
    }
 </script>
</html>

吴恒利

关注

1
点赞
踩
3

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>留言板</title></head><style type="text/css"> *{ list-style: none; }</s...
复制链接

扫一扫