JavaScript--动态添加元素

最新推荐文章于 2024-02-25 14:55:27 发布

weixin_30607659

最新推荐文章于 2024-02-25 14:55:27 发布

阅读量317

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lalalagq/p/10245222.html

版权

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

1.document.write()

2.Element.innerHTML

3.document.createElement()

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

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

效果图：

页面内容：

一、document.createElement()

1.利用document.createElement()创建一个节点

2.设置创建节点的属性

3.把创建的节点利用父Element.appendChild(子element)方法添加至父节点

下述demo中需要细细体会的细节：

①鼠标移出和鼠标移入事件为什么要那样写，放在循环外面

②innerText兼容性处理问题

代码如下：


 1 &lt;!DOCTYPE html&gt;
 2 &lt;html lang="en"&gt;
 3     &lt;head&gt;
 4         &lt;meta charset="UTF-8"&gt;
 5         &lt;title&gt;点击按钮 动态创建列表，鼠标放上高亮显示&lt;/title&gt;
 6     &lt;/head&gt;
 7     &lt;body&gt;
 8         &lt;input type="button" value="按钮"&gt;
 9         &lt;div&gt;&lt;/div&gt;
10 
11         &lt;!-- 插入JS代码 --&gt;
12         &lt;script&gt;
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 &lt; 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         &lt;/script&gt;
68     &lt;/body&gt;
69 &lt;/html&gt;

二、Element.innerHTML

innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。

可以借助字符串或数组的方式进行替换，再设置给innerHTML

优化后与document.createElement性能相近

代码如下：


 1 &lt;!DOCTYPE html&gt;
 2 &lt;html lang="en"&gt;
 3     &lt;head&gt;
 4         &lt;meta charset="UTF-8"&gt;
 5         &lt;title&gt;Document&lt;/title&gt;
 6     &lt;/head&gt;
 7     &lt;body&gt;
 8         &lt;input type="button" value="按钮"&gt;
 9         &lt;div&gt;&lt;/div&gt;
10         &lt;script&gt;
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 = '&lt;ul&gt;';  // 重新绘制
19 
20             //   // 遍历数据
21             //   for (var i = 0; i &lt; datas.length; i++) {
22             //     var data = datas[i];
23             //     box.innerHTML += '&lt;li&gt;' + data + '&lt;/li&gt;';   // 重新绘制
24             //   }
25 
26             //   // box.innerHTML = box.innerHTML + '&lt;/ul&gt;'
27             //   box.innerHTML += '&lt;/ul&gt;';  // 重新绘制
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 = '&lt;ul&gt;';    // 重新开辟内存 需要耗费时间
37 
38             //   // 遍历数据
39             //   for (var i = 0; i &lt; datas.length; i++) {
40             //     var data = datas[i];
41             //     html += '&lt;li&gt;' + data + '&lt;/li&gt;';    // 因为字符串不可变 重新开辟内存 需要耗费时间
42             //   }
43             //   html += '&lt;/ul&gt;';   // 因为字符串不可变 重新开辟内存 需要耗费时间
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('&lt;ul&gt;');
58 
59                 // 遍历数据
60                 for (var i = 0; i &lt; datas.length; i++) {
61                     var data = datas[i];
62                     array.push('&lt;li&gt;' + data + '&lt;/li&gt;');
63                 }
64                 array.push('&lt;/ul&gt;');
65 
66                 box.innerHTML = array.join('');
67                 // 当li 生成到页面之后，再从页面上查找li 注册事件
68 
69             }
70         &lt;/script&gt;
71     &lt;/body&gt;
72 &lt;/html&gt;

使用上述方法，需要对该方法的使用不断优化，比较麻烦，而且在高亮显示时候，需要在所有元素绘制到DOM树上后，重新开始注册事件，所以上述方法不推荐使用

三、document.write()

当点击按钮的时候使用document.write()输出内容，会把之前的整个页面覆盖掉，更加不推荐使用。

原文地址：https://www.cnblogs.com/WangYujie1994/archive/2019/01/09/10242687.html

转载于:https://www.cnblogs.com/lalalagq/p/10245222.html

weixin_30607659

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--动态添加元素

在网页中，使用JavaScript动态创建元素的方式有三种：1.document.write()2.Element.innerHTML3.document.createElement()在上述三种方法中，最常用最常用的是第三种方法，本文依托小例子，对三种方法加以总结。案例：点击按钮生成列表，鼠标放上高亮显示的效果效果图：页面内容： <input type="button"...
复制链接

扫一扫