<!-- 智能社© - http://www.zhinengshe.com/ 微博：@北京智能社 微信：zhi_neng_she 最具深度的前端开发培训机构 HTML+CSS/JS/HTML5 --> <!doctype html> <html> <head> <meta charset="utf-8"> <title>模拟留言板 - 智能社 - www.zhinengshe.com</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } body { background: #f9f9f9; font-size: 14px; } #box { 450px; padding: 10px; border: 1px solid #ccc; background: #f4f4f4; margin: 10px auto; } #fill_in { margin-bottom: 10px; } #fill_in li { padding: 5px 0; } #fill_in .text { 380px; height: 30px; padding: 0 10px; border: 1px solid #ccc; line-height: 30px; font-size: 14px; font-family: arial; } #fill_in textarea { 380px; height: 100px; line-height: 20px; padding: 5px 10px; border: 1px solid #ccc; font-size: 14px; font-family: arial; overflow: auto; vertical-align: top; } #fill_in .btn { border: none; 100px; height: 30px; border: 1px solid #ccc; background: #fff; color: #666; font-size: 14px; position: relative; left: 42px; } #message_text { display: none; } #message_text h2 { font-size: 14px; padding: 6px 0 4px 10px; background: #ddd; border-bottom: 1px solid #ccc; } #message_text li { background: #f9f9f9; border-bottom: 1px solid #ccc; color: #666; overflow: hidden; } #message_text h3 { padding: 10px; font-size: 14px; line-height: 24px; } #message_text p { padding: 0 10px 10px; text-indent: 28px; line-height: 20px; } </style> <script> window.onload=function (){ var oInp=document.getElementById('text'); var oTextarea=document.getElementsByTagName('textarea')[0]; var oBtn=document.getElementById('btn'); var oDiv=document.getElementById('message_text'); var oUl=oDiv.getElementsByTagName('ul')[0]; oBtn.onclick=function (){ var sTit=oInp.value; var sText=oTextarea.value; var oLi=document.createElement('li'); oLi.innerHTML='<h3>'+sTit+'</h3><p>'+sText+'</p>';//innerHTML离3插入标签式亮点 if( oInp.value == "" || oTextarea.value == "" ) { alert("二个框，你还不写全了啊？"); return; } if(oUl.children.length==0) { oUl.appendChild(oLi); oDiv.style.display='block'; } else { oUl.insertBefore(oLi,oUl.children[0]); oDiv.style.display='block'; } /*这种方式让我大脑洞开，狂欢呀*/ /*if(oUl.children[0]) { oUl.insertBefore(oLi,oUl.children[0]); oDiv.style.display='block'; } else { oUl.appendChild(oLi); oDiv.style.display='block'; }*/ oInp.value=''; oTextarea.value=''; oInp.focus(); }; }; </script> </head> <body> <div id="box"> <ul id="fill_in"> <form> <li>姓名：<input id="text" type="text" class="text" /></li> <li>内容：<textarea></textarea></li> <li><input id="btn" type="button" value="提交" class="btn" /></li> </form> </ul> <div id="message_text"> <h2>显示留言</h2> <ul> <!-- <li> <h3>标题</h3> <p>文字</p> </li> --> </ul> </div> </div> </body> </html>