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.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是，释放键盘时打印，若是不松开将不会打印

 



 

posted @ 2016-08-09 22:04  划过天际  阅读(14919)  评论(0)  编辑  收藏  举报