js之动态创建元素-使用数组代替字符串拼接 - ellaha

<!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 array = [];
                array.push('<ul>');
                for (var i=0; i < datas.length; i++) {
                    var data = datas[i];
                    array.push('<li>' + data + '</li>');
                }
                array.push('</ul>');
                box.innerHTML = array.join('');
            }
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="点击"><br>
<div id="box"></div>
</body>
</html>

posted on 2021-03-17 07:04 ellaha 阅读(155) 评论(0) 收藏举报

刷新页面返回顶部