简易留言板倒叙插入实现-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_6595/article/details/82650181

今天写了一个简单的留言板，评论是倒叙插入的。先上代码，然后说一下遇到的问题。

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的操作。