JS動態創建元素的方式

動態創建元素的三種方式：

1、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>

2、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/>";
        }
    }

3、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>