留言板:一个提交的信息显示框、一个文本输入框,一个提交按钮,当点击提交按钮,文本区域的信息提交到提交区域。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <style type="text/css"> *{ margin: 0 auto; } #div1{ 500px; height:300px; overflow: auto; border:1px solid blue; margin: 0 auto; } #div1 p{ font-size: 25px; font-family: 微软雅黑; color: red; } #text{ 500px; height:100px; margin:0 auto; } </style> <script type="text/javascript"> window.onload=function(){ var oBtn=document.getElementById('btn'); var oText=document.getElementById('text'); var oDiv=document.getElementById('div1'); oBtn.onclick=function(){ if(oText.value==''){ return false; } var newP=document.createElement('p');//创建p标签 newP.innerHTML=oText.value; oDiv.appendChild(newP); oText.value=''; } } </script> </head> <body> <div id="div1"> <p>这里边是提交的内容</p> </div> <textarea id="text" ></textarea> <br /> <input type="button" value="提交留言" id="btn"> </body> </html>