元素的建立三種方式案例—動態建立列表
阿新 • • 發佈：2018-11-10
要點：
1.通過document.write()建立，如果是頁面載入完成再執行這種方式建立元素物件，會將原來頁面上的內容全部清除掉。如果在頁面載入的過程中，則不會出現這種狀況，但是也沒有什麼意義
2.通過.innerHTML會重新賦值，如果原來節點有內容會被層疊掉，為了建立有文字內容元素時候用的多
3.通過.createElement()建立元素，並返回元素物件，這樣做可以實現佈局元素，可以實現任何元素的建立，但是不要追加到父元素中，並且不會覆蓋原來的內容，因為建立的新元素的值肯定是空值
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div{ width: 300px; height: 400px; background-color: blue; } #div2{ width: 300px; height: 400px; background-color: blue; } ul{ margin: 0; } /*進行測試的時候，發現div顯示部分會向下移動一些，強迫症的我沒有辦法接受*/ /*同時，在找出原因的時候，因為只測試input和div的樣式，現在回想起來邏輯有問題*/ /*出現了bug是在建立列表之後出現的，所以應該在後來建立的元素標籤上找bug*/ </style> </head> <body> <input type="button" value="點選建立列表" id="btn"> <div id="div"></div> <br> <input type="button" value="點選建立列表" id="btn2"> <div id="div2"></div> <script> function myGet(id){ return document.getElementById(id); } var names=["陳小帥","陳大帥","陳帥帥","chenxiaoshuai"]; myGet("btn").onclick = function(){ var str="<ul>"; for(var i=0; i<names.length; i++){ str+="<li>"+names[i]+"</li>"; } str+="</ul>"; //一定注意將首尾雙標籤區分開 myGet("div").innerHTML=str; } //這個例子通過迴圈建立大量的li，通過字串的拼接用innerHTML方式建立，帶內容的元素 var names2=["陳小帥","陳大帥","陳帥帥","chenxiaoshuai"]; myGet("btn2").onclick = function(){ var ulObj = document.createElement("ul"); myGet("div2").appendChild(ulObj); // 先建立元素，並將返回的ul標籤的物件追加到div2上 for(var i=0; i<names2.length; i++){ var liObj = document.createElement("li"); // 通過迴圈建立li標籤和物件上面的個數一樣多 liObj.innerHTML = names2[i]; ulObj.appendChild(liObj); // 建立完li標籤之後，通過innerHTML新增元素內容，並追加到本來ul標籤中 } } //通過createElement()方式建立元素，但是使用時需要追加到父元素中，可以新增div等佈局元素 </script> </body> </html>
