节点操作案例6-动态生成列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="按钮" id="btn"> <div id="box"></div> <script src="common.js"></script> <script> var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐']; // 点击按钮 动态创建列表，鼠标放上高亮显示 my$('btn').onclick = function () { // 动态创建ul，内存中创建对象 var ul = document.createElement('ul'); // 把ul 放到页面上 把ul放到DOM树上，并且会重新绘制 my$('box').appendChild(ul); for (var i = 0; i < datas.length; i++) { var 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; } } // 当鼠标经过li的时候执行 function liMouseOver() { // 鼠标经过高亮显示 this.style.backgroundColor = 'red'; } function liMouseOut() { // 鼠标离开取消高亮显示 this.style.backgroundColor = ''; } // 设置标签之间的内容 // function setInnerText(element, content) { // // 判断当前浏览器是否支持 innerText // if (typeof element.innerText === 'string') { // element.innerText = content; // } else { // element.textContent = content; // } // } </script> </body> </html>
common中的内容
function my$(id) { return document.getElementById(id); } // 处理浏览器兼容性 // 获取第一个子元素 function getFirstElementChild(element) { var node, nodes = element.childNodes, i = 0; while (node = nodes[i++]) { if (node.nodeType === 1) { return node; } } return null; } // 处理浏览器兼容性 // 获取下一个兄弟元素 function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; } // 处理innerText和textContent的兼容性问题 // 设置标签之间的内容 function setInnerText(element, content) { // 判断当前浏览器是否支持 innerText if (typeof element.innerText === 'string') { element.innerText = content; } else { element.textContent = content; } }
