在網頁中，使用JavaScript動態創建元素的方式有三種：
1.
<input type="button" value="按鈕" id="btn">
<div id="box"></div>
1.利用
代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>點擊按鈕 動態創建列表，鼠標放上高亮顯示</title> 6 </head> 7 <body> 8 <input type="button" value="按鈕" id="btn"> 9 <div id="box"></div> 10 11 <!-- 插入JS代碼 --> 12 <script> 13 var datas = ['西施', '貂蟬', '鳳姐', '芙蓉姐姐'];//數據源 14 //獲取按鈕節點 15 var btn=document.getElementById('btn'); 16 //給按鈕節點注冊事件 17 btn.onclick = function() { 18 // 動態創建ul，內存中創建對象 19 var ul = document.createElement('ul'); 20 // 把ul 放到頁面上(即給div添加ul) 21 var box=document.getElementById('box'); 22 box.appendChild(ul); 23 //遍歷數據集,常見li標簽 24 for (var i = 0; i < datas.length; i++) { 25 var data = datas[i]; 26 // 在內存中動態創建li 27 var li = document.createElement('li'); 28 // 把li添加到DOM樹，並且會重新繪制 29 ul.appendChild(li); 30 // 設置li中顯示的內容 31 // li.innerText = data; 32 //注意:不按照上面方式寫,因為innerText存在瀏覽器兼容性問題,對於 33 //不支持innerText的瀏覽器,返回值undefined,支持innerText的瀏覽器,返回string 34 //所以定義函數setInnerText,用以處理瀏覽器兼容性問題 35 setInnerText(li, data); 36 37 // 給li注冊事件 38 //注意:此處直接寫li.onmouseover=function(){}大有深意 39 //因為function在一個循環中,每循環一次,創建一個function,在內存中存儲一次 40 //再循環一次,在內存中再創建一個function 41 //循環多少次,內存中存儲多少個function,消耗內存 42 //故一般將這種函數放在外面定義. 43 li.onmouseover = liMouseOver; 44 li.onmouseout = liMouseOut; 45 } 46 } 47 48 // 定義函數，設置標簽之間的內容,主要為處理瀏覽器兼容性問題 49 function setInnerText(element,content){ 50 if(typeof(element.innerText)==='string'){ 51 element.innerText=content; 52 }else{ 53 element.textContent=content; 54 }//部分瀏覽器支持元素的innerText,部分僅僅使用textContent 55 } 56 57 // 當鼠標經過li的時候執行 58 function liMouseOver() { 59 // 鼠標經過高亮顯示 60 this.style.backgroundColor = 'red'; 61 } 62 63 function liMouseOut() { 64 // 鼠標離開取消高亮顯示 65 this.style.backgroundColor = ''; 66 } 67 </script> 68 </body> 69 </html>
二、
可以借助字符串或數組的方式進行替換，再設置給innerHTML
優化后與document.createElement性能相近
代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <input type="button" value="按鈕" id="btn"> 9 <div id="box"></div> 10 <script> 11 // 點擊按鈕 生成列表，鼠標放上高亮顯示的效果 12 13 // 模擬數據 14 // var datas = ['西施', '貂蟬', '鳳姐', '芙蓉姐姐']; 15 // var btn = document.getElementById('btn'); 16 // btn.onclick = function () { 17 // var box = document.getElementById('box'); 18 // box.innerHTML = '<ul>'; // 重新繪制 19 20 // // 遍歷數據 21 // for (var i = 0; i < datas.length; i++) { 22 // var data = datas[i]; 23 // box.innerHTML += '<li>' + data + '</li>'; // 重新繪制 24 // } 25 26 // // box.innerHTML = box.innerHTML + '</ul>' 27 // box.innerHTML += '</ul>'; // 重新繪制 28 // } 29 // 30 // 31 // 優化1 32 // var datas = ['西施', '貂蟬', '鳳姐', '芙蓉姐姐']; 33 // var btn = document.getElementById('btn'); 34 // btn.onclick = function () { 35 // var box = document.getElementById('box'); 36 // var html = '<ul>'; // 重新開辟內存 需要耗費時間 37 38 // // 遍歷數據 39 // for (var i = 0; i < datas.length; i++) { 40 // var data = datas[i]; 41 // html += '<li>' + data + '</li>'; // 因為字符串不可變 重新開辟內存 需要耗費時間 42 // } 43 // html += '</ul>'; // 因為字符串不可變 重新開辟內存 需要耗費時間 44 45 // box.innerHTML = html; // 重新繪制 46 // } 47 48 49 // 優化2 50 var datas = ['西施', '貂蟬', '鳳姐', '芙蓉姐姐']; 51 var btn = document.getElementById('btn'); 52 btn.onclick = function() { 53 var box = document.getElementById('box'); 54 55 // 使用數組替代字符串拼接 56 var array = []; 57 array.push('<ul>'); 58 59 // 遍歷數據 60 for (var i = 0; i < datas.length; i++) { 61 var data = datas[i]; 62 array.push('<li>' + data + '</li>'); 63 } 64 array.push('</ul>'); 65 66 box.innerHTML = array.join(''); 67 // 當li 生成到頁面之后，再從頁面上查找li 注冊事件 68 69 } 70 </script> 71 </body> 72 </html>
使用上述方法，需要對該方法的使用不斷優化，比較麻煩，而且在高亮顯示時候，需要在所有元素繪制到DOM樹上后，重新開始注冊事件，所以上述方法不推薦使用
三、
當點擊按鈕的時候使用document.write()輸出內容，會把之前的整個頁面覆蓋掉，更加不推薦使用。