JavaScript--动态添加元素
程序员文章站
2022-04-04 14:49:55
在网页中，使用JavaScript动态创建元素的方式有三种： 1.document.write() 2.Element.innerHTML 3.document.createElement() 在上述三种方法中，最常用最常用的是第三种方法，本文依托小例子，对三种方法加以总结。 案例：点击按钮 生成列 ......
在网页中，使用javascript动态创建元素的方式有三种：
1.
<input type="button" value="按钮" id="btn">
<div id="box"></div>
1.利用
代码如下：
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>
二、
可以借助字符串或数组的方式进行替换，再设置给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()输出内容，会把之前的整个页面覆盖掉，更加不推荐使用。