码迷,mamicode.com
首页 > Web开发 > 详细

js之动态创建列表(建议)

时间:2021-03-18 14:03:56      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:htm   鼠标   对象   eof   window   动态创建   页面   ntb   列表   

<!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);
                }
            }
            // 设置标签之间的内容
            function setInnerText(ele, content) {
                // 判断当前浏览器是否支持InnerText
                if (typeof ele.innerText) {
                    ele.innerText = content;
                } else {
                    ele.innerHTML = content;
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="点击" id="btn">
<div id="box"></div>
</body>
</html>

 

js之动态创建列表(建议)

标签:htm   鼠标   对象   eof   window   动态创建   页面   ntb   列表   

原文地址:https://www.cnblogs.com/ella-li/p/14548694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!