js使用DOM操作实现简单留言板的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了js使用DOM操作实现简单留言板的方法。分享给大家供大家参考。具体分析如下:

如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作。

js使用DOM操作实现简单留言板的方法

要点一:document.createElement("标签名") 新建元素

要点二:父元素.appendChild("元素")  把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来

要点三:父元素.insertBefore("元素","要插入哪个元素的前面")  把新建的元素插入到页面中指定的标签前面,这样后面输入的内容才会显示到前面

要点四:父元素.removeChild("元素")  删除指定元素

下面,上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
 var oMsg = document.getElementById("msg");
 var oBtn = document.getElementById("btn");
 var oMsg_c = document.getElementById("msg_c");
 var oUl = document.createElement("ul");
 oMsg_c.appendChild(oUl);
 oBtn.onclick = function(){
  var sVal = oMsg.value;
  var oli = document.createElement("li");
  oli.innerHTML = sVal + " <span>删除</span>";
  var oli1 = oUl.getElementsByTagName("li");
  if(oli1.length>0){
   oUl.insertBefore(oli,oli1[0]);
  }else{
   oUl.appendChild(oli);
  }
  oMsg.value='';
   var oSpan = document.getElementsByTagName("span");
   for(var i=0; i<oSpan.length; i++){
    oSpan[i].onclick = function(){
     oUl.removeChild(this.parentNode);
    }
   }
 }
} 
</script>
</head>
<body>
<h1>简易留言板</h1>
<input id="msg" type="text" size="40" value="">
<input id="btn" type="button" value="留言">
<div id="msg_c"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 #Javascript
js实现交换运动效果的方法
Apr 10 #Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 #Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 #Javascript
js简单实现点击左右运动的方法
Apr 10 #Javascript
js实现透明度渐变效果的方法
Apr 10 #Javascript
js实现同一页面多个运动效果的方法
Apr 10 #Javascript
You might like
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
python3实现微型的web服务器
2019/09/03 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
如何查看python关键字
2021/01/17 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
大二法英学生职业生涯规划范文
2014/02/27 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
酒店节能减排方案
2014/05/26 职场文书
祝寿主持词
2015/07/02 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python