<!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制作的一个简易留言板