JS动态建立元素的方式

动态建立元素的三种方式：

一、document.write()：

　　a、写在函数里面的话,会冲刷掉以前的页面元素,因此通常不用或是少用；

　　b、会打开document.open()或关闭document.close()文档流；

　　c、文档流: 默认的浏览器的加载顺序是从上往下依次加载的,把当前页面加载完毕以后,就至关于关闭了文档流.

例：

<input type="text" value="123"/><input type="button" onclick="f1();"value="动态生成元素"/>
<div id="d">
    <script>
        document.write("789");
    </script>
</div>
<script>
    document.write("<input type='text' value='22222'/>");
    function f1(){
        document.write("<input type='text' value='8888'/>");
    }
</script>

二、innerHTML：

　　a、比较方便,但要注意尽可能不要频繁的拼接字符串;

　　b、字符串具备不可变性,最好先将标签字符串放在数组中,会节省内存空间,提高性能；

　　c、标签.innerHTML：会得到全部的子标签元素,可用于赋值拷贝

　　　　innerHTML= ""：会删除全部子标签节点.慎用,注意赋值前后.

例：

<input type="button" value="建立元素" id="btn"/>
<div id="d"></div>
<script>
    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' value='8888'><br/>";
        }
    }

三、document.createElement:

　　a、建立的是一对标签,是生成在内存当中的；

　　b、appendChild()是将内存中生成标签剪切到须要追加的位置

例：

<div id="d"></div><script>    var id=document.getElementById("d");    var ul=document.createElement("ul");    var li=document.createElement("li");    id.appendChild(ul);    ul.appendChild(li);    li.innerHTML="添加的元素";   </script>