JavaScript--动态添加元素

在网页中，使用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.οnmοuseοver=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>

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

三、document.write()

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

转载于:https://www.cnblogs.com/WangYujie1994/p/10242687.html

JavaScript--动态添加元素相关推荐

javaScript动态添加Li元素
html代码块 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
解决javascript动态改变img的src属性图片不显示问题
解决javascript动态改变img的src属性图片不显示问题参考文章: (1)解决javascript动态改变img的src属性图片不显示问题 (2)https://www.cnblogs.co ...
jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定事件的解决方案. 参考文章: (1)jquery动态添加元素无法触发绑定事件的解决方案. (2)https://www.cnblogs.com/momozjm/p/ ...
【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
javascript动态创建可拖动、最大化、最小化的层
javascript动态创建可拖动.最大化.最小化的层 2010-02-06 13:19 用Javascript实现div层的拖动是很常见的一种操作,比如弹出提示对话框,快捷登录等等.之前用隐藏层的方 ...
PHP js curl,php curl 获取javascript动态生成的值
我在做一个青果教务系统的模拟登录,使用php的curl,我是新手,边学边做的,它的登录页面有几个hidden的值,发现有一个值是javascript动态生成的,用curl抓取的时候是空的,我要怎么抓取 ...
QT通过JavaScript动态创建QML对象
QT通过JavaScript动态创建QML对象通过JavaScript动态创建QML对象动态创建对象动态创建组件从QML字符串创建对象维护动态创建的对象动态删除对象通过JavaScrip ...
driver.get调用iframe中的页面_【5分钟玩转Lighthouse】爬取JavaScript动态渲染页面
0x00 背景概述通过[技术干货 007 | Scrapy爬虫初探]教程,大家应该已经对如何编写爬虫有了一定的认识.但对于较为复杂的网站设计,比如网站页面使用了JavaScript动态渲染,入门级的 ...
JavaScript动态加载js文件
/********************************************************************** JavaScript动态加载js文件* 说明:* 之前没 ...
java 读取svg元素_svg动态添加元素
动态添加元素 x坐标值 y坐标值文本内容动态添加元素 var svgDoc = null; var time = null; // 动态添加元素 var addElement = function ...

JavaScript--动态添加元素

JavaScript--动态添加元素相关推荐

最新文章

热门文章