首页 > > 网页制作 > Javascript >

JavaScript--动态添加元素

2019-01-10 07:47:57来源：博客园阅读 ()

在网页中，使用JavaScript动态创建元素的方式有三种：

1.document.write()

2.Element.innerHTML

3.document.createElement()

在上述三种方法中，最常用最常用的是第三种方法，本文依托小例子，对三种方法加以总结。

案例：点击按钮生成列表，鼠标放上高亮显示的效果

效果图：

页面内容：

一、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="按钮" 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>

二、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="按钮" 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>