在网页中，使用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()输出内容，会把之前的整个页面覆盖掉，更加不推荐使用。