JS动态创建元素

动态创建元素的三种方法:

第一种document.write("")

document.write("<input type=‘text’>  value='456'>");

相当于创建了一个默认名是456的输入框

function f1(){
        document.write("<input type='text' value='999999'>");
    }

但是当document.write("")写在函数中时,会冲刷掉之前的页面元素,之前的document都不显示,所以少用或者不用document.write("")创建元素

第二种innerHTML创建元素

要注意尽量不要频繁的拼接字符串

div.innerHTML+="<input type='text' value='999999'>";   

字符串具有不可变性,会重复开辟内存空间,要注意优化

优化版本就是放在数组中

第三种document.createElement

var ul = document.createElement("ul");

移除节点

var ul = document.createElement("ul");

在前面插入节点

insertBefore

var n1 = lis[2].cloneNode(true);

ul.insertBefore(n1,lis[0]);                 第一个参数是要插入的节点,第二个参数是插入的位置

两个键盘事件:

 onkeydown: 鼠标按下时触发,不会获得当前输入的内容

 onkeyup :键盘按下并抬起时才触发,会获得输入的内容

原文地址:https://www.cnblogs.com/sw1990/p/5759353.html