代码如下:

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

留言板(初学者使用js实现)的更多相关文章

  1. html的留言板制作(js)

    这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论 ...

  2. node留言板开发————node.js

    各位需要的话可以下载去看一下. 源码下载链接:https://download.csdn.net/download/weixin_41018304/11833778

  3. 问题:关于一个贴友的js留言板的实现

    需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> ...

  4. [js高手之路] vue系列教程 - 实现留言板todolist(3)

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...

  5. 用js做一个简单的留言板效果

    html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...

  6. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  7. vue+egg.js+mysql一个前后端分离留言板项目

    一.前序 我相信每个人前端搬运工和我想法都是一样的,都有一个做全栈的梦,无奈面对众多的后台语言,却不从下手,今天由我来带你们潜入全栈的门槛,注意是门槛.能不能学的会后面的内容全靠坚持了. 我今天主要做 ...

  8. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  9. js制作留言板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. vue2.0 学习 ,开始学习

    先看官网的介绍上面的教程   https://cn.vuejs.org/v2/guide/ 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子.你可以在浏览器新标签 ...

  2. apk 反编译 - 最新版图文教程

    apk 反编译 - 最新版图文教程 结合网上众多教程,整理一篇自己操作的,工具都是目前最新版 apk 反编译也就是将打包后的 apk 反编译为资源文件(图片).layout.样式.相关的实现代码等.( ...

  3. weixin设置菜单

    https://jingyan.baidu.com/article/925f8cb8dfcf11c0dce05661.html

  4. 初识Spark程序

    执行第一个spark程序 普通模式提交任务: bin/spark-submit \ --class org.apache.spark.examples.SparkPi \ --master spark ...

  5. [翻译] AsyncDisplayKit

    AsyncDisplayKit AsyncDisplayKit is an iOS framework that keeps even the most complex user interfaces ...

  6. 在 Windows Server Container 中运行 Azure Storage Emulator(一):能否监听自定义地址?

    我要做什么? 改 ASE 的监听地址.对于有强迫症的我来说,ASE 默认监听的是 127.0.0.1:10000-10002,这让我无法接受,所以我要将它改成域名 + 80 端口的方式: 放到容器中. ...

  7. Linux 下Shell的学习2

    0. 查看帮助(比如内置功能)    man bash    -->变量处理大全 1.-计算变量长度的不同方法及不同方法的耗时对比    尽可能的用内置的命令处理,速度快        time ...

  8. contextlib

    contextlib with 语句   上下文 任何对象,只要正确实现了上下文管理,就可以用于with语句. 实现上下文管理是通过__enter__和__exit__这两个方法实现的. 例如,下面的 ...

  9. August 26th 2017 Week 34th Saturday

    Love means finding the beauty in someone's imperfections. 爱情就是在那个人的不完美中找到美. Our mate isn't actually ...

  10. svg压缩工具svgo安装使用

    svgo是基于node.js的插件,所以需要先安装node.js 1.安装完node.js后,打开node.js命令窗口,输入npm install -g svgo,安装成后会出现下边的内容 2.对s ...