代码如下：

<!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. JS判断客户端是手机还是PC的2个代码

    搬了下砖 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", & ...

  2. Windows server 2008 Tips

    Tips for remote server in domain. Some Definition user [user] group workgroup domain Local account d ...

  3. c#之委托详解(Delegate)

    一.委托的概念 在我们学习委托之前,我们来了解下,什么是委托呢? 官方概念:委托是一种安全地封装方法的类型,它与 C 和 C++ 中的函数指针类似.与 C 中的函数指针不同,委托是面向对象的.类型安全 ...

  4. leetcode Ch6-Data Structure

    1. Sliding Window Maximum class Solution { public: vector<int> maxSlidingWindow(vector<int& ...

  5. 【SQL server 2012】复制数据库到另一台机器上

    当需要将一台机器(源机器)上的一个数据库完全复制到另一台机器(目标机器)上时,可以选择先在源机器上备份该数据库,然后在目标机器上还原该备份的方法. 下面详细描述具体步骤: 1. 打开SQL serve ...

  6. HBuilder：一个不错的web前端IDE(代码编辑器)

    Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS方面就弱爆了.DW虽然支持JS语法高亮也支持JQuery Jq ...

  7. 89C51单片机的学习

    好久都没来写一些东西了 最近老是忙着玩了,都忘记认真学习了. 大概从明天开始就要开始忙了. 1,英语四级 2,单片机课程 3,安卓课程 4,PS 感觉事情好多. 但是我还是心不在焉.好奇怪. 反正就是 ...

  8. 未能从程序集 C:\Program Files (x86)\MSBuild\14.0\bin\Microsoft.Data.Entity.Build.Tasks.dll 加载任务“EntityClean”

    问题: 未能从程序集 C:\Program Files (x86)\MSBuild\14.0\bin\Microsoft.Data.Entity.Build.Tasks.dll 加载任务“Entity ...

  9. HDFS Namenode&Datanode

    HDFS Namenode&Datanode HDFS 机制粗略示意图 客户端写入文件流程: NN && DN Namenode(NN)工作机制 NN是整个文件系统的管理节点. ...

  10. Join的加强版CountDownLatch

    CountDownLatch允许一个或多个线程等待其他线程完成操作. 假如有这样一个需求:我们需要解析一个Excel里多个sheet的数据,此时可以考虑使用多线程,每个线程解析一个sheet里的数据, ...