今天写了一个简单的留言板,评论是倒叙插入的。先上代码,然后说一下遇到的问题。
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" src="controller.js"></script>
<title>留言板</title>
</head>
<body>
<div class="name">
<p>昵称:<input id = input_one></p>
</div>
<div class="content">
<div class="content_title">内容:</div><textarea id="input_two"></textarea>
</div>
<button type="button" class="submit" οnclick="showMessage()">提交留言!</button>
<div class="leave_message">
<h3 class="submit_title">留言列表</h3>
<hr>
</div>
<ul id="list">
</ul>
<p class="thanks">感谢留言!</p>
</body>
</html>
js部分:
function showMessage(){ var name = document.getElementById("input_one").value; var message = document.getElementById("input_two").value; var newItem=document.createElement("p"); var messageTxt=document.createTextNode(name + ":" + message); newItem.appendChild(messageTxt); var list=document.getElementById("list"); list.insertBefore(newItem,list.childNodes[0]) document.getElementById("input_one").value = ""; document.getElementById("input_two").value = ""; }
css部分:
.name {
margin-top: 100px;
}
.content {
margin-top: 20px;
}
.submit {
margin-left: 463px;
}
#input_one {
width: 500px;
}
#input_two {
width: 500px;
height: 150px;
}
.submit_title {
}
.leave_message {
width: 540px;
}
body{
position:absolute;
left: 200px;
}
.thanks{
margin-left: 466px;
}
.list{
width: 500px;
list-style: none;
}
.content_title {
float: left;
}
主要遇到问题,倒叙插入用insertbefore。
主要锻炼了对dom的操作。