在网页中，使用JavaScript动态创建元素的方式有三种：
1.document.write()
2.Element.innerHTML
3.document.createElement()
在上述三种方法中，最常用最常用的是第三种方法，本文依托小例子，对三种方法加以总结。
案例：点击按钮 生成列表，鼠标放上高亮显示的效果
效果图：
页面内容：
<input type="button" value="按钮">
<div></div>一、document.createElement()
1.利用document.createElement()创建一个节点
2.设置创建节点的属性
3.把创建的节点利用父Element.appendChild(子element)方法添加至父节点
下述demo中需要细细体会的细节：
①鼠标移出和鼠标移入事件为什么要那样写，放在循环外面
②innerText兼容性处理问题
代码如下：
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="按钮"> 9 <div></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 // 在内存中动态创建li27 var li = document.createElement('li');28 // 把li添加到DOM树，并且会重新绘制29 ul.appendChild(li);30 // 设置li中显示的内容31 // li.innerText = data;32 //注意:不按照上面方式写,因为innerText存在浏览器兼容性问题,对于33 //不支持innerText的浏览器,返回值undefined,支持innerText的浏览器,返回string34 //所以定义函数setInnerText,用以处理浏览器兼容性问题35 setInnerText(li, data);36 37 // 给li注册事件38 //注意:此处直接写li.onmouseover=function(){}大有深意39 //因为function在一个循环中,每循环一次,创建一个function,在内存中存储一次40 //再循环一次,在内存中再创建一个function41 //循环多少次,内存中存储多少个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,部分仅仅使用textContent55 }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> 二、Element.innerHTML
innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
可以借助字符串或数组的方式进行替换，再设置给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="按钮"> 9 <div></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 // 优化132 // 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 // 优化250 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()
当点击按钮的时候使用document.write()输出内容，会把之前的整个页面覆盖掉，更加不推荐使用。
原文地址：