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 相关文章推荐
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
vue.js实现标签页切换效果
Jun 07 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
js时间控件只显示年月
2017/01/08 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
Python对列表排序的方法实例分析
2015/05/16 Python
Python 中的with关键字使用详解
2016/09/11 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python实现邮件发送功能
2019/08/10 Python
Python3列表List入门知识附实例
2020/02/09 Python
django 实现简单的插入视频
2020/04/07 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
失业者真诚求职信范文
2013/12/25 职场文书
初中生操行评语大全
2014/04/24 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书