简单版发布留言案例

时间:2019-08-21
本文章向大家介绍简单版发布留言案例,主要包括简单版发布留言案例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

案例分析:

  • 页面组成:一个文本域,一个提交按钮,一个留言板
  • 当点击提交按钮的时候,先判断文本域内容是不是空,如果是空,就警告
  • 如果不是空,就新建一个li,然后把文本域的内容赋值给li,然后在ul里面的前面添加li
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9       * {
10         margin: 0;
11         padding: 0;
12       }
13         textarea {
14             width: 150px;
15             height: 100px;
16             margin-top: 100px;
17             margin-left: 100px;
18             border: 1px solid pink;
19         }
20         ul  li {
21             background-color: pink;
22             width: 200px;
23             margin-top: 20px;
24             margin-left: 100px;
25         }
26     </style>
27 </head>
28 <body>
29     <textarea name="" id=""></textarea>
30     <button>发布</button>
31     <ul>
32 
33     </ul>
34     <script>
35         //获取元素
36         var btn = document.querySelector('button');
37         var text = document.querySelector('textarea');
38         var ul = document.querySelector('ul');
39         
40         btn.onclick = function() {
41             if(text.value == '') {
42             alert('您没有输入内容')
43             return false;
44         } else {
45             //(1)创建元素
46             var li = document.createElement('li');
47             //先有li,才能赋值
48             li.innerHTML = text.value;
49             //(2)添加元素
50             ul.insertBefore(li,ul.children[0]);
51             }
52         }
53     </script>
54 </body>
55 </html>

效果图

原文地址:https://www.cnblogs.com/cookie-bubble/p/11389480.html