用JS实现一个简单的留言功能

  1、今天给你们展示一个简单的留言功能，如下图一般，我们点击留言可以在下面插入你所留言的内容，还有点击下面的删除按钮可以你说所留言。

2、首先我们用HTML和CSS简单的搭建一个留言模块，代码如下：

<div id="box">

    <input type="text" name="" id="t1">

    <input type="button" value="留言" id="btn">

          <ul>           </ul>

</div>

看到这儿 你们可能会疑惑我为啥要敲一个<ul></ul>这个是用来装你留言的盒子，到时候我们把留言的内容传到ul中的<li></li>中就可以了。

3、框架敲好了之后我们就需要用js代码来实现他们了，首先我们先来获取到这些元素

var oT=document.getElementById('t1');

var oBtn=document.getElementById('btn');

var oUl=document.querySelector('ul');

4、给按钮添加一个onclick事件，点击按钮之后，我们首先获取input中的值，然后在判断它是否为空，如果为空我们责给出提示，如果不为空的话我们责将它添加到ul中的<li></li>中，添加好之后我们还需要获取li中的删除按钮，然后再给他添加事件。当点击‘删除’按钮时我们需要将li删除，然后就完成了这个功能的简单部分。下面了是js部分。

5、下面了是所有的代码：