简单的发布留言

菜鸟级码农小林

已于 2022-04-29 15:40:57 修改

阅读量57

点赞数

分类专栏： JavaScript html 文章标签： javascript html safari

于 2022-04-29 14:44:46 首次发布

本文链接：https://blog.csdn.net/m0_59735348/article/details/124495705

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

html

20 篇文章 0 订阅

订阅专栏

<html>
   <textarea name="" id=""></textarea>
   <button>发送</button>
   <ul></ul> 
</html>
<style>
   li{
      width: 200px;
      background-color: orange;
    }
   li a{
     float: right;
   }
  </style>
<script>
      var text = document.querySelector('textarea')
      var btn = document.querySelector('button')
      var ul = document.querySelector('ul')
      btn.onclick = function(){
        if(text.value == ''){
          alert('里面没有内容哦')
          return false;
        }else{
          // 创建元素
          var li = document.createElement('li')
          // 先有li 才能赋值
          li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"
          // 点击发送后，对文本框里的内容进行清空
          text.value = ''
          // 添加元素  在第一个元素前添加
          ul.insertBefore(li,ul.children[0])
          // 删除元素  
          var del = document.querySelectorAll('a')
          for(var i = 0;i < del.length;i++){
              del[i].onclick = function(){
                 ul.removeChild(this.parentNode)
              }
          }
      }
</script>

效果图：

补充：

// 添加元素这个跟push一样，直接在元素后面添加

ul.appendChild(li)

<a href='javascript:;'></a> //这里设置href=‘javascript:;’，表示页面不跳转

菜鸟级码农小林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的发布留言

<html> <textarea name="" id=""></textarea> <button>发送</button> <ul> <li></li> </ul> </html><script> var text = document.querySelector('textarea') var btn = documen.
复制链接

扫一扫

专栏目录