JavaScript实现简单版的留言发布与删除 JavaScript实现简单版的留言发布

文章图片

首先用户在输入框中输入内容，按下发布按钮，内容到下面的li中，并且清空输入框中的内容
下面这个li元素就是后面创建的

文章图片

Documenttextarea {resize: none; border: 1px solid pink}

分析：
1、点击按钮后，就动态创建一个li，添加到ul里面
【JavaScript实现简单版的留言发布与删除】2、创建li的同时，把文本域中的值通过li.innerHTML赋给li
3、如果想把新的留言显示到后面就用appendChild，如果显示到前面就用insertBefore
怎么实现放在前面：
并且实现删除留言的案例：
添加li后面对应添加一个删除按钮
1、把文本域的值赋值给li的同时多加一个删除的链接
2、需要把每个链接获取过来，当点击某一个链接的时候，删除当前链接所在的li; 也就是当前链接的父亲
3、阻止链接跳转可以添加javascript:void(0),或者javascript:;

文章图片

Documenttextarea {resize: none; border: 1px solid pink}li {background-color: pink; margin-top: 2px; width: 630px; height: auto; line-height: 30px; }p {font-size: 15px; margin-top: 0px; float: left; }button {width: 50px; height: 30px}li a {float: right; }

到此这篇关于JavaScript实现简单版的留言发布与删除的文章就介绍到这了,更多相关JavaScript留言发布删除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！