文本框内容添加至div 并可以删除

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }

        #text{
            margin:20px;
        }

        ul{
            width: 300px;
            height: 500px;
            border: 1px solid;
            margin-left: 20px;
        }

        li{
            height: 20px;
            margin:10px auto;
        }
    </style>

</head>
<body>
   <body>
<input type="text" id="text">
    
<input type="button" value="发送">
    
<ul>

</ul>

<script>
    var Input=document.getElementById("text");
    var But=document.getElementsByTagName("input")[1];
    var Ul=document.getElementsByTagName("ul")[0];
    But.onclick=function(){
       var Text=Input.value;
       var oLi=document.createElement("li");
            oLi.innerHTML=Text;
        var oButton=document.createElement("button");
            oButton.innerHTML="删除";
            oLi.appendChild(oButton);
            Ul.insertBefore(oLi,Ul.childNodes[0]);

            Input.value="";
            oButton.onclick=function(){
              oLi.style.display="none";
           }
    }

</script>
</body>

</body>
</html>

文本框内容添加至div 并可以删除

相关推荐