制作一个简单的留言板，用户在输入框中输入内容，提交，然后内容显现在box里面
依然首先需要获取到输入框，提交按钮，box；
然后给提交按钮设置点击事件；
获取输入框的内容；
显示到box中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{width: 100px;height: 100px;border: 1px solid #000;width: 200px} </style> </head> <body> <input type="text" name="" id="text1"> <input type="button" name="" id="but" value='提交'> <div id="box"></div> <script type="text/javascript"> window.onload=function(){ var text1 = document.getElementById("text1"); // var but = document.getElementById("but"); // var box = document.getElementById("box"); // ==>获取到输入框，提交按钮，box but.onclick=function(){ // ==>给提交按钮设置点击事件 var val = text1.value; //声明变量val等于输入框的内容 var newText = '<p>' + val + '</p>' //声明变量newText等于新的内容 box.innerHTML = box.innerHTML + newText //box的innerHTML =以前的内容+新的内容 } } </script> </body> </html>
box.innerHTML = box.innerHTML + newText：新的内容显示在老的内容下面，如果要把新的内容显示在老的内容的上面，把box.innerHTML和newText的位置换一下就行了
box.innerHTML ='<p>你好</p>'。这个显示出来就是在box中出现你好，从html里面来看，是在div中生成了一个p标签，内容是”你好“，如果内容为变量，如上面代码一样，是var val = text1.value，如果写成box.innerHTML ='<p>val</p>'，并不能显示成获取到的内容，显示的内容仅仅是val而已
所以就涉及到了，字符串的拼接如：box.innerHTML ='<p>'+val+'</p>';