動態創建元素 · JavaScript

## document.write() 使用此方法輸出內容會把之前的整個頁面覆蓋掉.所以只能在頁面加載的時候輸出,不能再事件中使用. ## element.innerHTML 可以在事件中使用.頁面原來的內容是保留的.因為是瀏覽器畫出來的,如果內容非常多的話,速度就很慢了.每次設置HTML的時候,頁面都會重新繪制. ``` <body> <div id="box"> </div> <input type="button" id="btn" value="創建"> <script> var data = ['西施', '貂蟬', '鳳姐', '芙蓉姐姐']; var btn = document.getElementById('btn'); btn.onclick = function () { var box = document.getElementById('box'); box.innerHTML = '<ul>'; for (let i = 0; i < data.length; i++) { box.innerHTML += '<li>' + data[i] + '</li>' } box.innerHTML += '</ul>'; } </script> ``` 優化 ``` <body> <div id="box"> </div> <input type="button" id="btn" value="創建"> <script> var data = ['西施', '貂蟬', '鳳姐', '芙蓉姐姐']; var btn = document.getElementById('btn'); btn.onclick = function () { var box = document.getElementById('box'); var html = '<ul>'; for (let i = 0; i < data.length; i++) { html += '<li>' + data[i] + '</li>' //因為字符串不可變,重新開辟內存,需要耗費時間 } html += '</ul>' box.innerHTML = html; //一次性繪制 } </script> ``` 再度優化 ``` <body> <div id="box"> </div> <input type="button" id="btn" value="創建"> <script> var data = ['西施', '貂蟬', '鳳姐', '芙蓉姐姐']; var btn = document.getElementById('btn'); btn.onclick = function () { var box = document.getElementById('box'); var arr = []; arr.push('<ul>'); for (let i = 0; i < data.length; i++) { arr.push('<li>' + data[i] + '</li>'); //數組不會重新開辟空間 } arr.push('</ul>'); box.innerHTML = arr.join(''); } </script> ``` ## document.createElement() 推薦使用這種方式. ``` <body> <div id="box"> <div></div> </div> <script> var box = document.getElementById('box'); //在內存中創建一個DOM對象 var p = document.createElement('p'); p.innerText = 'hello'; p.style.color = 'skyblue'; //把p元素追加放到DOM樹上 box.appendChild(p); </script> ```