节点操作案例6-动态生成列表
Posted jiumen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了节点操作案例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;
以上是关于节点操作案例6-动态生成列表的主要内容，如果未能解决你的问题，请参考以下文章
C++程序中执行abort等操作导致没有生成dump文件的问题案例分析
Zookeeper--07---案例----服务器动态上下线
js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格
❤️前端DOM笔记-删除事件，注册事件与冒泡⭐⭐⭐(附带动图案例)