经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript实现简单版的留言发布与删除
来源:jb51  时间:2022/3/8 16:55:06  对本文有异议

首先用户在输入框中输入内容,按下发布按钮,内容到下面的li中,并且清空输入框中的内容

下面这个li元素就是后面创建的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. textarea {
  10. resize: none;
  11. border: 1px solid pink
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <textarea name="" id="" cols="30" rows="10"></textarea>
  17. <button>发布</button>
  18. <ul>
  19. </ul>
  20. <script>
  21. //点击发布按钮,获取文本域中的文本,给下面新创建li中的值
  22. //获取文本框元素、按钮元素
  23. var text = document.querySelector('textarea')
  24. var btn = document.querySelector('button')
  25. var ul = document.querySelector('ul')
  26. //当按下按钮后就创建新的li元素,放到ul的后面
  27. btn.onclick = function() {
  28. //创建li元素 因为是每按一次按钮,下面就会添加一个li,需要用到循环
  29. //需要判断,当文本框里面的内容为空时,按下按钮是不会添加的
  30. if (text.value != '') {
  31. var li = document.createElement('li')
  32. ul.appendChild(li)
  33. //添加节点
  34. //赋值li里面的内容
  35. li.innerHTML = text.value
  36. //按下按钮后,文本框里面的值要清空
  37. text.value = ''
  38. }
  39. }
  40. </script>
  41. </body>
  42. </html>

分析:

1、点击按钮后,就动态创建一个li,添加到ul里面

2、创建li的同时,把文本域中的值通过li.innerHTML赋给li

3、如果想把新的留言显示到后面就用appendChild,如果显示到前面就用insertBefore

怎么实现放在前面:

并且实现删除留言的案例:

添加li后面对应添加一个删除按钮

1、把文本域的值赋值给li的同时多加一个删除的链接

2、需要把每个链接获取过来,当点击某一个链接的时候,删除当前链接所在的li;也就是当前链接的父亲

3、阻止链接跳转可以添加javascript:void(0),或者javascript:;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. textarea {
  10. resize: none;
  11. border: 1px solid pink
  12. }
  13. li {
  14. background-color: pink;
  15. margin-top: 2px;
  16. width: 630px;
  17. height: auto;
  18. line-height: 30px;
  19. }
  20. p {
  21. font-size: 15px;
  22. margin-top: 0px;
  23. float: left;
  24. }
  25. button {
  26. width: 50px;
  27. height: 30px
  28. }
  29. li a {
  30. float: right;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <textarea name="" id="" cols="30" rows="10"></textarea>
  36. <button class="btn">发布</button>
  37. <ul>
  38. </ul>
  39. <script>
  40. //点击发布按钮,获取文本域中的文本,给下面新创建li中的值
  41. //获取文本框元素、按钮元素
  42. var text = document.querySelector('textarea')
  43. var btn = document.querySelector('.btn')
  44. var ul = document.querySelector('ul')
  45. console.log()
  46. //当按下按钮后就创建新的li元素,放到ul的后面
  47. btn.onclick = function() {
  48. //创建li元素 因为是每按一次按钮,下面就会添加一个li,需要用到循环
  49. //需要判断,当文本框里面的内容为空时,按下按钮是不会添加的
  50. if (text.value != '') {
  51. var li = document.createElement('li')
  52. //li里面创建一个p放内容
  53. // var p = document.createElement('p')
  54. // var dele = document.createElement('button')
  55. // ul.appendChild(li)
  56. ul.insertBefore(li, ul.children[0])
  57. //在li里面添加p
  58. // console.log(ul.children[0])
  59. // ul.children[0].appendChild(p)
  60. //在li里面添加删除按钮
  61. // ul.children[0].appendChild(dele)
  62. //添加节点
  63. //赋值li里面的内容
  64. li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"
  65. // dele.innerHTML = '删除'
  66. // dele.style.float = 'right'
  67. //按下按钮后,文本框里面的值要清空
  68. text.value = ''
  69. //删除元素,删除的是li,当前a链接的父亲
  70. var as = document.querySelectorAll('a')
  71. for (var i = 0; i < as.length; i++) {
  72. as[i].onclick = function() {
  73. //node.removeChild(child)
  74. // this.parentNode li 父亲为ul
  75. ul.removeChild(this.parentNode)
  76. }
  77. } //这个循环操作为什么放在按钮点击事件外面就不会起作用
  78. }
  79. }
  80. </script>
  81. </body>
  82. </html>

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号