本文主要是介绍原生js点击按钮动态创建列表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script src="js/common.js"></script>
<script>var btn = my$('btn');var box = my$('box');// 模拟数据var datas = ['apple', 'banana', 'watermelon'];// 点击按钮，生成列表，鼠标放上高亮显示// btn.onclick = function () {// box.innerHTML = '<ul>'; // 效率问题 重新绘制// // 遍历数据// for (var i = 0; i < datas.length; i++) {// var data = datas[i];// box.innerHTML += '<li>' + data + '</li>'; // 重新绘制// }// box.innerHTML += '</ul>'; // 重新绘制// }// 优化1 先赋值给一个变量，最后再用innerHTML()绘制// btn.onclick = function () {// var html = '<ul>'; // 重新开辟内存空间 需要消耗时间// // 遍历数据// for (var i = 0; i < datas.length; i++) {// var data = datas[i];// html += '<li>' + data + '</li>'; // 因为字符串不可变 重新开辟内存空间 需要消耗时间// }// html += '</ul>'; // 因为字符串不可变 重新开辟内存空间 需要消耗时间// box.innerHTML = html;// }// 优化2 字符串拼接改为数组追加元素btn.onclick = function () {var arr = [];arr.push('<ul>');// 遍历数据for (var i = 0; i < datas.length; i++) {var data = datas[i];arr.push('<li>' + data + '</li>');}arr.push('</ul>');// 数组转换为字符串box.innerHTML = arr.join('');}
</script>
</body>
</html>// common.js// 通过id获取元素
function my$(element) {var el = document.getElementById(element);return el;
}
这篇关于原生js点击按钮动态创建列表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
