JavaScript--动态添加元素

旧城等待， 2022-03-28 04:38 364阅读 0赞

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

1.**document.write()**

**2.Element.innerHTML**

**3.document.createElement()**

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

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

**效果图：**

**![1562037-20190109095755236-171331020.png][]**

**页面内容：**

**一、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         
    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][https_www.cnblogs.com_WangYujie1994_archive_2019_01_09_10242687.html]

[1562037-20190109095755236-171331020.png]: /images/20220328/f947f68cc19747ea978b7ac805566b82.png
[https_www.cnblogs.com_WangYujie1994_archive_2019_01_09_10242687.html]: https://www.cnblogs.com/WangYujie1994/archive/2019/01/09/10242687.html