js使用DOM操作实现简单留言板的方法
2015-04-10 11:15
1101 查看
如图所示简易留言板,也就是自娱自乐版,说白了就是练习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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JS实现简单的对dom操作封装
- 使用vue.js 在移动端简单实现的下拉加载更多 和一些常用的js/jq操作和vueFilter,v-if和v-show运用
- 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现。
- DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
- Js之使用dom实现创建节点和删除节点的方法
- 用js的DOM操作写简单的留言板
- 简单实现JS对dom操作封装
- 使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
- C#使用互斥量(Mutex)实现多进程并发操作时多进程间线程同步操作(进程同步)的简单示例代码及使用方法
- Js操作DOM元素及获取浏览器高宽的简单方法
- 一个简单的上传附件,并显示附件的方法.(JS的DOM操作取得input file的值.)
- 使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
- 简单实现JS对dom操作封装
- JavaScript使用setInterval()函数实现简单轮询操作的方法
- JavaScript使用setInterval()函数实现简单轮询操作的方法
- Asp.Net使用POST方法最简单的实现
- 自己常用js方法(DOM操作)
- JAVA操作XML一(读取):使用DOM读取XML数据的两种具体实现
- CKEditor使用方法记录一(简单的操作)
- 使用Javascript操作DOM的一些方法--元素的访问/复制等