<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Weibo release </title>
<style type= "Text/css" >
*{
padding:0;
margin:0;
}
UL {
List-style:none;
}
. box {
width:600px;
Height:auto;
margin:100px Auto;
Text-align:center;
padding:30px 0;
}
. Box TEXTAREA {
width:450px;
Resize:none; /* Setting text cannot be dragged over/*
}
. Box Li {
width:450px;
line-height:30px;
border-bottom:1px dashed #ccc;
margin-left:80px;
Text-align:left;
}
. Box Li a {
Float:right;
}
</style>
<script type= "Text/javascript" >
Window.onload = function () {
var btn = document.getelementsbytagname ("button") [0];
var txt = document.getelementsbytagname ("textarea") [0];
var ul = document.createelement ("ul");
Btn.parentNode.appendChild (UL);
Btn.onclick = function () {
1. Need to determine if there is any content in the text
if (txt.value = = "") {
Alert ("Pro! Content cannot be empty Oh!!");
return false; Let the operation terminate in this place.
}
var newli = document.createelement ("Li");
newli.innerhtml = Txt.value + "<a href= ' javascript:; ' > Delete </a> ";
Ul.appendchild (NEWLI);
Empty the input box
Txt.value = "";
var AA = document.getElementsByTagName ("a");//Get all a tags
for (var i = 0;i<aa.length;i++) {
Aa[i].onclick = function () {
This.parentNode.remove ();
}
}
}
}
</script>
<body>
<div class= "box" >
Weibo release: <textarea name= "" id= "" cols= "" rows= "></textarea>
<button> Release </button>
</div>
</body>
js-Weibo release