留言板(初学者使用js实现)

时间:2021-09-30 17:38:32

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>留言板</title>
</head>
<body>
  <input type="text"><input type="button" value="请留言">
  <ul></ul>
  <script>
    //获取页面元素
    var oInp = document.querySelectorAll('input');
    var oUl = document.querySelector('ul');
    //给按钮添加点击事件
    oInp[1].onclick = function(){
      //获取文本框中的内容
      var str = oInp[0].value;
      //创建li
      var oLi = document.createElement('li');
      //创建文本节点
      var oTxt = document.createTextNode(str);
      oLi.appendChild(oTxt);
      //创建a
      var oA = document.createElement('a');
      oA.href = "javascript:;"//将a作为js中的按钮用,不再跳转
      //设置a中的内容
      oA.innerHTML = '删除';
      oA.onclick = function(){
        this.parentNode.parentNode.removeChild(this.parentNode);
      }
      oLi.appendChild(oA);
      if(oUl.firstChild){
        oUl.insertBefore(oLi,oUl.firstChild);
      }else{
        oUl.appendChild(oLi);
      }
    }
  </script>
</body>
</html>