6-5 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现网页留言功能，点击确定按钮，把输入框的内容添加到留言列表中。

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

一、为按钮店家点击事件，取得输入框的内容，添加到留言列表

提示:
  1. 取得取得输入框的value
  2. value如果是空，则返回
  3.创建一盒li节点
  4.把value写入新创建的li节点的innerHTML
  5.把li节点添加到留言列表节点下面
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body {
  12.             padding: 20px;
  13.         }
  14.         #list {
  15.             list-style: none;
  16.             width: 400px;
  17.             border: 1px solid #666666;
  18.         }
  19.         li {
  20.             list-style: none;
  21.             background: #a7cbff;
  22.             margin: 10px 0;
  23.         }
  24.         textarea {
  25.             display: block;
  26.             width: 400px;
  27.             height: 50px;
  28.             margin: 10px 0;
  29.         }
  30.  
  31.     </style>
  32.     <script type="text/javascript">
  33.         window.onload = function () {
  34.  
  35.             // 获取元素
  36.             var list = document.getElementById('list');
  37.             var text = document.getElementById('text');
  38.             var btn = document.getElementById('btn');
  39.  
  40.             // 按钮添加点击事件，把输入框的内容显示到留言列表
  41.  
  42.  
  43.     </script>
  44. </head>
  45. <body>
  46. <ul id="list">
  47.     <li>评论1</li>
  48.     <li>评论2</li>
  49. </ul>
  50. <textarea id="text"></textarea>
  51. <button id="btn">确定</button>
  52. </body>
  53. </html>
下一节