javascript留言板

用DOM相关方法创建的留言板

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <style>
 4     #ul1 {margin:0; padding:0;}
 5     #ul1 li {list-style:none; width:300px; background:#CCC; border:1px solid #999; position:relative;}
 6     #ul1 li h2 {display:inline-block;}
 7     #ul1 li p {display:inline-block;}
 8     #ul1 li a {position:absolute; right:4px; bottom:4px;}
 9 </style>
10     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
11     <title>无标题文档</title>
12 <script type="text/javascript">
13 window.onload=function (){
14     var oName=document.getElementById('name');
15     var oContent=document.getElementById('content');
16     var oUl=document.getElementById('ul1');
17     var oBtn=document.getElementById('btn1');
18     var aLi=oUl.getElementsByTagName('li');
19     var oLi=null;
20     
21     oBtn.onclick=function (){
22         oLi=document.createElement('li');
23         var oH2=document.createElement('h2');
24         var oP=document.createElement('p');
25         var oA=document.createElement('a');
26         
27         oH2.innerHTML=oName.value+'：';
28         oP.innerHTML=oContent.value;
29         oA.innerHTML='删除';
30         oA.href='javascript:;';
31         oA.onclick=function (){
32             oUl.removeChild(this.parentNode);
33         };
34         
35         oLi.appendChild(oH2);
36         oLi.appendChild(oP);
37         oLi.appendChild(oA);
38         
39         if(aLi.length>0){  
40             oUl.insertBefore(oLi, aLi[0]); //确保新添加的在最前面
41         }
42         else{
43             oUl.appendChild(oLi);
44         }
45     };
46 };
47 </script>
48 </head>
49 <body>
50 姓名：<input id="name" type="text" /><br />
51 内容：<textarea id="content" rows="5" cols="40"></textarea><br />
52 <input id="btn1" type="button" value="留言" />
53 <ul id="ul1">
54 </ul>
55 </body>
56 </html>