动态创建元素 · 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> ```