3.1.1 JavaSript創建視圖 · 各種語言一起擼JS+OC+ADT+PHP

**實例效果如下圖** ![](https://box.kancloud.cn/755bdb6e117a51c60759b3b05cb64a3b_584x151.png) ~~~ <html> <head> <meta charset="utf-8"> </head> <body> </body> </html> <script language="javascript"> var o = document.body , userName , btLogin ; //定義變量實現IE6.0和IE7.0兼容。 try { userName = document.createElement("<input>"); // btLogin = document.createElement("<input>"); btLogin = document.createElement("<button>"); } catch (e) { userName = document.createElement("input"); // btLogin = document.createElement("input"); btLogin = document.createElement("button"); } userName.id ="userName"; userName.value ="小明"; o.appendChild(userName); // btLogin.id ="btLogin"; // btLogin.type ='button'; // btLogin.value ="提交"; // o.appendChild(btLogin); btLogin.id ="btLogin"; btLogin.innerText ="提交"; o.appendChild(btLogin); var getUserName = document.getElementById("userName"); var btLogin = document.getElementById("btLogin"); console.log( getUserName.value); console.log( btLogin.value); console.log( btLogin.innerText); </script> ~~~