您的位置：首页 > Web前端 > JavaScript

简约留言板js代码

2016-12-28 17:34 134 查看
<!DOCTYPE html>

<html>

<head>
<title>留言板</title>
<meta charset="utf-8">

<style type="text/css">

</style>

</head>

<body>
<div id="container">

        <div id="message" contenteditable="true"></div>

        <button onclick="leaveMsg()">发表留言</button>

        <div id="history">

            <div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div><div>

                最新的一条留言

            </div>

        </div>
    </div>

<script>
 var message = document.getElementById("message");
 var his = document.getElementById("history");
 // 发布留言
 function leaveMsg() {
 // 1. 获取留言内容
 var txt = message.textContent;
 // 2. 创建元素节点
 var _div = document.createElement("div");
 // 3. 设置内容
 _div.textContent = txt;
 // 4. 获取历史留言的第一个元素节点
 var _fc = his.firstElementChild;
 // 5. 将留言内容插入到第一个节点的前面
 his.insertBefore(_div, _fc);
 // 6. 清空留言板
 message.textContent = "";
 }
 </script>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航