小综合实例

1.制作出一个语言输入的基本框架

2.在文本输入框输入内容，点击按钮，内容自动弹到上面的框架内

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 { 240px; height:200px; border:1px solid #333; background:#f1f1f1; padding:10px; }
 8 </style>
 9 <script>
10 window.onload = function (){
11     var oDiv = document.getElementById('div1');
12     var oStrong = document.getElementById('strong1');
13     var oText = document.getElementById('text1');
14     var oBtn = document.getElementById('btn1');
15     
16     oBtn.onclick = function (){
17         // 原来的内容，你得给我留着，然后再加上新内容
18         // a = a + b
19         // a += b
20         
21         // 添加：+=
22         // oDiv.innerHTML = oDiv.innerHTML + oText.value + '<br />';
23         oDiv.innerHTML += oStrong.innerHTML + oText.value + '<br />';
24         oText.value = '';
25     };
26 };
27 </script>
28 </head>
29 
30 <body>
31 
32 <div id="div1"></div>
33 <strong id="strong1">张三：</strong>
34 <input id="text1" type="text" />
35 <input id="btn1" type="button" value="提交" />
36 
37 </body>
38 </html>

示例代码