网页怎样像说说一样发布消息
前端技术发展越来越快,我们想要实现类似发说说功能的时候应该怎样实现呢?今天小编我就来给大家讲解讲解。
操作方法
- 01
首先，在body标签里面书写一个button标签，然后给button添加文字，如图，我就根据自己的情况来写。
- 02
接着再给button标签添加一个id，这样方便我们待会找到这个button按钮，id的名字可以自己命名。
- 03
如图，button按钮写好了，我们在网页中预览一下，可以看到网页中已经多了一个按钮。
- 04
接着我们再来书写一个div标签，并且给这个div也提添加一个id，这个div的作用就是用来存放发布的内容的。
- 05
接着我们在body标签写上script标签。然后开始书写JavaScript代码。
- 06
如图，使用getElementById()方法来寻找到网页中的button按钮和div块，并且把它们分别复制给btn和content变量。
- 07
然后我们给我们的button按钮添加一个点击事件，这样当我们的鼠标点击按钮的时候就会做出响应。
- 08
接着在点击事件里面写上响应事件的代码，比如，我们先要使用createElement()方法来生成一个元素，这里我就创建div元素，当然你也可以创建其他元素，比如span，p等等。
- 09
然后我们使用innerHTML来给创建的新元素里面添加内容，这里我就随便写了。
- 10
之后，再使用appendChild()方法来把创建好的元素给添加进content容器里面。
- 11
最后，当我们点击按钮的时候，就会自动创建一个新元素，并且这个新元素里面有我们添加的内容，然后这个新元素就会插入到content这个容器当中。点击多次则会插入多条内容。
赞 (0)