js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
動態(tài)創(chuàng)建元素的三種方式：
第一種：
Document.write();
<body> <input type="button" id="btn" value="生成元素" onclick="f1()"/> <input type="text" value=""/> <script>document.write("這是新添加的內(nèi)容"); </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()創(chuàng)建元素時，會發(fā)生一個問題：默認情況之下，頁面由上而下地加載，形成一個文檔流，當執(zhí)行完畢時，文檔流就會關(guān)閉，從而將之前生成的元素沖刷掉，所以不推薦使用這種方法。
第二種：
使用innerHTML創(chuàng)建元素：
<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");//此方法字符串具有不可變性，頻繁的操作字符串會造成內(nèi)存的浪費。 // btn.οnclick=function(){ // for(var i=0;i<10;i++){ // d.innerHTML+="<input type='text'><br />"; // } // }//因此我們可以先定義一個數(shù)組，將字符串存儲在數(shù)組當中，最后在將數(shù)組轉(zhuǎn)化為字符串。var arr=[];btn.onclick=function(){for(var i=0;i<10;i++){arr.push("<input type='text'><br />");}d.innerHTML=arr.join("");} </script> </body>此方法不適合創(chuàng)建很多元素（標簽）時使用。
第三種：
使用document.createElement()創(chuàng)建一個元素：
<body> <div id="d"></div> <script>var d = document.getElementById("d"); //獲取div的idvar ul = document.createElement("ul");// 在這里創(chuàng)建一個ul標簽 d.appendChild(ul); //將存儲在內(nèi)存中ul標簽剪切到div之中 var li = document.createElement("li");//因為都是字符串，所以需要加""是創(chuàng)建出來的一對標簽 ul.appendChild(li); //將存儲在內(nèi)存中的li標簽剪切到ul之中 li.innerHTML ="1231321";li.id = "abc";ul.removeChild(li); //使用removeChild()可以刪除ul里面的li標簽 </script> </body>插入節(jié)點：insertBefore()
（微博案例，后發(fā)布信息的人排在最上面）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? elementNode.insertBefore(new_node,existing_node)
| new_node | 必需。要插入的節(jié)點。 |
| existing_node | 必需。已有節(jié)點。在此節(jié)點之前插入新節(jié)點。 |
?
<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為需要插入的節(jié)點，lis[0]是需要插入的節(jié)點的位置。</script>運行結(jié)果：
兩個事件：onkeydown與onkeyup
?
Onkeydown鍵盤按下時觸發(fā)，不會獲得當前的輸入內(nèi)容；
?
<body> <script src="common.js"></script> <input type="text" value="" id="input"/> <script>var input=$$("input");input.onkeydown=function(){console.log(input.value);} // input.οnkeyup=function(){ // console.log(input.value); // } </script> </body>Onkeyup? 鍵盤按下并釋放時才會觸發(fā)
<body> <script src="common.js"></script> <input type="text" value="" id="input"/> <script>var input=$$("input"); // input.οnkeydοwn=function(){ // console.log(input.value); // } input.onkeyup=function(){console.log(input.value);} </script> </body> Onkeydown 每輸入一個鍵，按下一個鍵時打印上一個鍵 Onkeyup每輸入一個k是，釋放鍵盤時打印，若是不松開將不會打印?
?
轉(zhuǎn)載于:https://www.cnblogs.com/xinjianheyi/p/5754791.html
總結(jié)
以上是生活随笔為你收集整理的js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Core Animation对象来实
- 下一篇： 用户画像 摘录