js實現微博評論動態添加

HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p class="box" id="weibo">
    <p>
        <p class="title">有什麼新鮮事想告訴大傢</p>
        <p class="num">還可以輸入<span>140</span>字</p>
    </p>
    <p style="clear: both"></p>
    <p class="input">
        <textarea name="" id="txt" cols="20" rows="10"></textarea>
    </p>
    <p class="func">
        <a id="btn">發佈</a>
    </p>
    <p style="clear: both"></p>
    <ul id="ul"></ul>
    <p></p>
</p>
</body>
</html>

CSS:

* {
	margin: 0;
	padding: 0
}

ul {
	list-style: none;
	margin-top: 30px;
}

.box {
	width: 600px;
	margin: 100px auto;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 20px;
}

textarea {
	width: 100%;
	height: 68px;
	outline: none;
	resize: none;
}

ul {
	width: 450px;
	padding-left: 80px;
}

ul li {
	line-height: 25px;
	border-bottom: 1px dashed #ccc;
}

.title {
	float: left;
}

.num {
	float: right;
}

.input {
	margin-top: 4px;
	padding: 5px;
}

.func {
	float: right;
}

#btn {
	display: inline-block;
	height: 28px;
	line-height: 29px;
	width: 60px;
	min-width: 40px;
	font-size: 14px;
	background-color: #ff8140;
	color: #fff;
	box-shadow: none;
	cursor: default;
	border: 1px solid #f77c3d;
	outline: none;
	padding: 0 10px;
	border-radius: 2px;
	text-align: center;
}

input {
	float: right;
}

JavaScript:

var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var ul = document.getElementById("ul");
btn.onclick = function() {
    var val = txt.value;
    if (val === "") {
        alert("請輸入內容");
        return;
    }
    var li = document.createElement("li");
    var span = document.createElement("span");
    setInnerText(span, val);
    li.appendChild(span);
    var lis = ul.children;
    if (lis.length === 0) {
        ul.appendChild(li);
    } else {
        ul.insertBefore(li, lis[0]);
    }

    txt.value = "";
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = "刪除"li.appendChild(btn);
    btn.onclick = function() {
        var li = this.parentNode;
        ul.removeChild(li);
    }
}

發佈留言