<!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>