用DOM相关方法创建的留言板

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <style>

     #ul1 {margin:0; padding:0;}

     #ul1 li {list-style:none; width:300px; background:#CCC; border:1px solid #999; position:relative;}

     #ul1 li h2 {display:inline-block;}

     #ul1 li p {display:inline-block;}

     #ul1 li a {position:absolute; right:4px; bottom:4px;}

 </style>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>无标题文档</title>

 <script type="text/javascript">

 window.onload=function (){

     var oName=document.getElementById('name');

     var oContent=document.getElementById('content');

     var oUl=document.getElementById('ul1');

     var oBtn=document.getElementById('btn1');

     var aLi=oUl.getElementsByTagName('li');

     var oLi=null;

     oBtn.onclick=function (){

         oLi=document.createElement('li');

         var oH2=document.createElement('h2');

         var oP=document.createElement('p');

         var oA=document.createElement('a');

         oH2.innerHTML=oName.value+'：';

         oP.innerHTML=oContent.value;

         oA.innerHTML='删除';

         oA.href='javascript:;';

         oA.onclick=function (){

             oUl.removeChild(this.parentNode);

         };

         oLi.appendChild(oH2);

         oLi.appendChild(oP);

         oLi.appendChild(oA);

         if(aLi.length>0){

             oUl.insertBefore(oLi, aLi[0]); //确保新添加的在最前面

         }

         else{

             oUl.appendChild(oLi);

         }

     };

 };

 </script>

 </head>

 <body>

 姓名：<input id="name" type="text" /><br />

 内容：<textarea id="content" rows="5" cols="40"></textarea><br />

 <input id="btn1" type="button" value="留言" />

 <ul id="ul1">

 </ul>

 </body>

 </html>

javascript留言板的更多相关文章

  1. JavaScript学习笔记（三）——留言板知操纵DOM节点

    用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...

  2. javaScript简单的留言板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. JavaScript+IndexedDB实现留言板：客户端存储数据

    之前看到贴友有问:用js怎么实现留言板效果.当时也写了一个,但是没有实现数据存储:http://www.ido321.com/591.html 现在将之前的改写一下,原来的HTML布局不变,为了防止G ...

  4. dd——留言板再加验证码功能

    1.找到后台-核心-频道模型-自定义表单 2.然后点击增加新的自定义表单 diyid 这个,不管他,默认就好 自定义表单名称 这个的话,比如你要加个留言板还是投诉建议?写上去呗 数据表  这个不要碰, ...

  5. html的留言板制作（js）

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

  6. 11月8日PHP练习《留言板》

    一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php  登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  7. LigerUi框架+jquery+ajax无刷新留言板系统的实现

    前些天发布了LigerUi框架的增.删.改代码,一堆代码真的也没一张图片.有的网友推荐上图,所有今天把涉及到这个框架的开源的留言板共享给大家.在修改的过程中可能有些不足的地方希望大家拍砖. 因为留言板 ...

  8. tp框架做留言板

    首先是登录的LoginController.class.php 代码内容是 <?php namespace Admin\Controller; use Think\Controller; cla ...

  9. 数据库留言板例题：session和cookie区别

    session和cookie区别: <?php session_start(); //session_start();必须写在所有的php代码前边 ?> <!DOCTYPE html ...

随机推荐

  1. python SendMail 发送邮件

    最近在学习python 时,用到了发送邮件的操作,通过整理总结如下: 1.普通文本邮件 普通文本邮件发送的实现,关键是要将MIMEText中_subtype设置为plain,首先导入smtplib和m ...

  2. java.lang.UnsatisfiedLinkError: D:\Tomcat-7.0.59\apache-tomcat-7.0.59\bin\tcnative-1.dll: Can't load IA 32-bit .dll on a AMD 64-bit platform

    今日上午用Tomcat运行一个小项目,报出以下异常信息: java.lang.UnsatisfiedLinkError: D:\Tomcat-7.0.59\apache-tomcat-7.0.59\b ...

  3. MVC3+AutoFac实现程序集级别的依赖注入

    1.介绍      所谓程序集级别的依赖注入是指接口和实现的依赖不使用配置文件或硬代码实现(builder.RegisterType<UserInfoService>().As<IU ...

  4. 【BZOJ】【2253】【WC 2010 BeijingWC】纸箱堆叠

    树套树 Orz zyf 我的树套树不知道为啥一直WA……只好copy了zyf的写法TAT 这题还可以用CDQ分治来做……但是蒟蒻不会…… //y坐标的树状数组是按权值建的……所以需要离散化…… /** ...

  5. OneAPM 技术公开课第二讲：开启性能为王的架构时代

    「OneAPM 技术公开课」由应用性能管理第一品牌 OneAPM 发起,内容面向 IT 开发和运维人员.云集技术牛人.知名架构师.实践专家共同探讨技术热点.继北京站第一场火爆上演之后,第二场将于9月1 ...

  6. lua语言入门之Sublime Text设置lua的Build System

    转自: http://blog.csdn.net/wangbin_jxust/article/details/8911956 最近开始学习LUA语言,使用Sublime Text作为编辑器,不得不说, ...

  7. 用django-tinymce搞个富文本编辑器

    玩过一圈之后,这些应用慢慢变得简单: 步骤如下: 一,安装: pip install django-tinymce 二,配置APP: INSTALLED_APPS = ( ... 'tinymce', ...

  8. Android 通过程序添加桌面快捷方式

    原理:通过代码向 Launcher 中的广播接收者发送广播来创建快捷图标. 首先要声明的权限是: <!--添加图标的权限--> <uses-permission android:na ...

  9. hdu2717 Catch That Cow

    http://acm.hdu.edu.cn/showproblem.php?pid=2717 //水搜... #include<stdio.h> #include<math.h> ...

  10. leetcode:两个数的和||

    两个数的和|| 给定一个排序数组,求出其中两个数的和等于指定target时,这两个数在原始数组中的下标,返回的下标从1开始 解题 原始数组已经是升序的,找出其中两个数的和等于target 定义两个指针 ...