动态创建列表 · JavaScript

## 点击按钮动态创建,当前li高亮显示 ``` <body> <div id="box"> </div> <input type="button" id="btn" value="创建"> <script> var data = ['jack', 'milan', 'richard', 'mike']; var btn = document.getElementById('btn'); btn.onclick = function () { //内存中创建ul var ul = document.createElement('ul'); var box = document.getElementById('box'); box.appendChild(ul); for (let i = 0; i < data.length; i++) { var li = document.createElement('li'); li.innerText = data[i]; ul.appendChild(li); //注册事件 li.onmouseover = over; li.onmouseout = out; } } function over() { this.style.backgroundColor = 'red'; } function out() { this.style.backgroundColor = ''; } </script> ```