今天写了一个简单的留言板,评论是倒叙插入的。先上代码,然后说一下遇到的问题。
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" onclick="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的操作。