js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
生活随笔
收集整理的这篇文章主要介绍了
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
动态创建元素的三种方式：
第一种：
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.οnclick=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的idvar 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.οnkeyup=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.οnkeydοwn=function(){ // console.log(input.value); // } input.onkeyup=function(){console.log(input.value);} </script> </body> Onkeydown 每输入一个键，按下一个键时打印上一个键 Onkeyup每输入一个k是，释放键盘时打印，若是不松开将不会打印
转载于:https://www.cnblogs.com/xinjianheyi/p/5754791.html
总结
以上是生活随笔为你收集整理的js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 使用Core Animation对象来实
- 下一篇： 用户画像 摘录