<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var datas = ['你好', '明天', '冲刺']
var btn = document.getElementById('btn');
btn.onclick = function () {
var box = document.getElementById('box');
// var html = '<ul>'; 即使定义一个字符串存放，因为字符串不可变 重新开辟不空间 耗费时间
// box.innerHTML = '<ul>'; // 重新绘制，效率不高
// for (var i=0; i < datas.length; i++) {
// var data = datas[i];
// box.innerHTML += '<li>' + data + '</li>'; // 重新绘制，效率不高
// }
// box.innerHTML += '</ul>'; // 重新绘制，效率不高
// }
// 使用数组代替字符串拼接
var datas = [];
datas.push('<ul>');
for (var i=0; i < datas.length; i++) {
var data = datas[i];
datas.push('<li>' + data + '</li>');
}
datas.push('</ul>');
box.innerHTML = datas.join('');
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击"><br>
<div id="box"></div>
</body>
</html>