标签: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>
标签:htm 鼠标 对象 eof window 动态创建 页面 ntb 列表
原文地址:https://www.cnblogs.com/ella-li/p/14548694.html