欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-20 19:54:34
实现输入内容点击请留言按钮,就会在下方留言并且后面有删除选项,点击即可删除留言。 ......

代码如下:

<!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>