動態創建元素的三種方式：
第一種：
Document.write();
<body> <input type="button" id="btn" value="生成元素" onclick="f1()"/> <input type="text" value=""/> <script> document.write("這是新添加的內容"); </script> <div id="d"> <script> document.write("<input type='text' value='123'/>"); </script> </div> <script> function f1(){ document.write("<input type='text' value='456'/>"); } f1(); </script>
使用documen.write()創建元素時，會發生一個問題：默認情況之下，頁面由上而下地加載，形成一個文檔流，當執行完畢時，文檔流就會關閉，從而將之前生成的元素沖刷掉，所以不推薦使用這種方法。
第二種：
使用innerHTML創建元素：
<body> <div id="d"></div> <input type="button" value="生成" id="btn"/> <script> var txt=document.getElementById("txt"); var d=document.getElementById("d"); var btn=document.getElementById("btn"); //此方法字符串具有不可變性，頻繁的操作字符串會造成內存的浪費。 // btn.onclick=function(){ // for(var i=0;i<10;i++){ // d.innerHTML+="<input type='text'><br />"; // } // } //因此我們可以先定義一個數組，將字符串存儲在數組當中，最后在將數組轉化為字符串。 var arr=[]; btn.onclick=function(){ for(var i=0;i<10;i++){ arr.push("<input type='text'><br />"); } d.innerHTML=arr.join(""); } </script> </body>
此方法不適合創建很多元素（標簽）時使用。
第三種：
使用document.createElement()創建一個元素：
<body> <div id="d"></div> <script> var d = document.getElementById("d"); //獲取div的id var ul = document.createElement("ul");// 在這里創建一個ul標簽 d.appendChild(ul); //將存儲在內存中ul標簽剪切到div之中 var li = document.createElement("li");//因為都是字符串，所以需要加""是創建出來的一對標簽 ul.appendChild(li); //將存儲在內存中的li標簽剪切到ul之中 li.innerHTML ="1231321"; li.id = "abc"; ul.removeChild(li); //使用removeChild()可以刪除ul里面的li標簽 </script> </body>
插入節點：insertBefore()
（微博案例，后發布信息的人排在最上面）
elementNode.insertBefore(new_node,existing_node)
| new_node |
必需。要插入的節點。 |
| existing_node |
必需。已有節點。在此節點之前插入新節點。 |
<script src="common.js"></script> <div id="dv"> <ul id="ul"> <li>11111</li> <li id="li2">22222</li> <li>33333</li> <li>44444</li> </ul> <script> var ul=$$("ul"); var lis2=$$("li2"); var lis=ul.children; ul.insertBefore(li2,lis[0]);//li2為需要插入的節點，lis[0]是需要插入的節點的位置。 </script>
運行結果：
兩個事件：onkeydown與onkeyup
Onkeydown鍵盤按下時觸發，不會獲得當前的輸入內容；
<body> <script src="common.js"></script> <input type="text" value="" id="input"/> <script> var input=$$("input"); input.onkeydown=function(){ console.log(input.value); } // input.onkeyup=function(){ // console.log(input.value); // } </script> </body>
Onkeyup 鍵盤按下並釋放時才會觸發
<body> <script src="common.js"></script> <input type="text" value="" id="input"/> <script> var input=$$("input"); // input.onkeydown=function(){ // console.log(input.value); // } input.onkeyup=function(){ console.log(input.value); } </script> </body>
Onkeydown 每輸入一個鍵，按下一個鍵時打印上一個鍵
Onkeyup每輸入一個k是，釋放鍵盤時打印，若是不松開將不會打印
