首页 > 代码库 > javascript-简易留言板制作
javascript-简易留言板制作
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>js练习</title> <style type="text/css"> #ull{ padding:0px; margin: 0px; } #ull li{ list-style:none; background-color: #ccc; width:auto; border:1px solid #999; position:relative; } #ull li h2{ display:inline-block; } #ull li p{ display:inline-block; } #ull li a{ position:absolute; text-decoration: none; color:red; right:5px; bottom:5px; } #content{ width:300px; height:100px; } </style> <script type="text/javascript"> window.onload = function() { var oname = document.getElementById(‘name‘); var ocontent = document.getElementById(‘content‘); var oul = document.getElementById(‘ull‘); var obtn = document.getElementById(‘btn‘); var lli = oul.getElementsByTagName(‘li‘); obtn.onclick = function(){ oli = document.createElement(‘li‘); oh2 = document.createElement(‘h2‘); op = document.createElement(‘p‘); oa = document.createElement(‘a‘); oa.innerHTML="删除"; oa.href = "javascript:;"; oa.onclick = function(){ oul.removeChild(this.parentNode); } oh2.innerHTML = oname.value + ‘：‘; op.innerHTML = ocontent.value; oli.appendChild(oh2); oli.appendChild(op); oli.appendChild(oa); if(lli.length > 0){ oul.insertBefore(oli,lli[0]); } else{ oul.appendChild(oli); } } } </script></head><body>姓名：<input type="text" id="name"><br>留言：<textarea cols="20" rows="3" wrap = "hard" id="content"></textarea><br><button id="btn">添加</button><ul id="ull"></ul></body></html>
这是一个利用DOM制作的一个简易留言板
javascript-简易留言板制作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。