| 标题 | 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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。