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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
JS表单传值和URL编码转换
Mar 03 Javascript
vue动态绑定style样式
Apr 20 Vue.js
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
PHP中的命名空间详细介绍
2015/07/02 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
jQuery的一些注意
2006/12/06 Javascript
用javascript控制iframe滚动的代码
2007/04/10 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
简单了解Django模板的使用
2017/12/20 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
经济与贸易专业应届生求职信
2013/11/19 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
农民入党思想汇报
2014/01/03 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
导师工作推荐信
2015/03/27 职场文书