使用innerHTML动态创建元素
2019-10-16 本文已影响0人
王远清orz
<body>
<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script>
var datas = ['1', '2', '3', '4', '5'];
// 不停的重新绘制，耗时长
// my$('btn').onclick = function () {
// my$('box').innerHTML = '<ul>';
// for (var i = 0; i < datas.length; i++) {
// var data = datas[i];
// // console.log(data);
// my$('box').innerHTML += '<li>' + data + '</li>';
// }
// my$('box').innerHTML += '</ul>';
// }
// 优化一
// 字符串不可改变，每次字符串拼接都要消耗内存
my$('btn').onclick = function () {
// my$('box').innerHTML = '<ul>';
var html = '<ul>';
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
// console.log(data);
html += '<li>' + data + '</li>';
}
html += '</ul>';
my$('box').innerHTML = html ;
}
// 优化二
//往数组中添加内容，数组是对象，不需要重新开辟内存
my$('btn').onclick = function () {
// my$('box').innerHTML = '<ul>';
var array = [];
// var html = '<ul>';
array.push('<ul>');
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
// console.log(data);
array.push('<li>' + data + '</li>');
}
array.push('</ul>');
// my$('box').innerHTML = html;
my$('box').innerHTML = array.join('');
}
</script>
</body>
