js之动态创建列表（建议） - ellaha

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById('btn');

            var datas = ['你好', '坚持', '青春'];

            // 点击按钮 动态创建列表 鼠标放上去高亮显示
            btn.onclick = function () {
                var box = document.getElementById('box');
                // 动态创建ul 内存中创建对象
                var ul = document.createElement('ul');
                // 把ul放到页面上 把ul放到DOM树上 并且会重新绘制
                box.appendChild(ul);

                for (var i=0; i < datas.length; i++) {
                    data = datas[i];
                    // 在内存中动态创建li
                    var li = document.createElement('li');
                    // 把li添加到DOM树 并且重新绘制
                    ul.appendChild(li);
                    // 设置li中显示的内容 处理兼容性
                    // li.innerText = data;
                    setInnerText(li, data);

                    // 给li注册事件
                    li.onmouseover = liMouseOver;
                    li.onmouseout = liMouseOut;
                }
            }
            // 设置标签之间的内容
            function setInnerText(ele, content) {
                // 判断当前浏览器是否支持InnerText
                if (typeof ele.innerText) {
                    ele.innerText = content;
                } else {
                    ele.innerHTML = content;
                }
            }
            // 当鼠标经过的时候执行
            function liMouseOver() {
                // 高亮显示
                this.style.color = 'red';
            }
            function liMouseOut() {
                // 鼠标离开时取消高亮
                this.style.color = "";
            }
        }
    </script>
</head>
<body>
<input type="button" value="点击" id="btn">
<div id="box"></div>
</body>
</html>
posted on 2021-03-17 12:35 ellaha 阅读(533) 评论(0) 编辑收藏举报
刷新页面返回顶部