JavaScript--动态添加元素
在网页中，使用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 // 在内存中动态创建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>
二、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 // 优化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()
当点击按钮的时候使用document.write()输出内容，会把之前的整个页面覆盖掉，更加不推荐使用。
原文地址：https://www.cnblogs.com/WangYujie1994/archive/2019/01/09/10242687.html
