使用creatElement创建元素，添加事件
2019-10-21 本文已影响0人
王远清orz
<body>
<input type="button" value="按钮" id="btn">
<div id="box">
</div>
<script>
// var p = document.createElement('p');
// p.innerText = '你好';
// p.style.color = 'red';
// var box = document.getElementById('box');
// box.appendChild(p);
// 模拟数据
var datas = ['1', '2', '3', '4', '5', '6'];
// 获取按钮
var btn = my$('btn');
// 给按钮注册事件
btn.onclick = function () {
var box = my$('box');
// 创建ul元素
var ul = document.createElement('ul');
// 把ul放入页面
box.appendChild(ul);
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
// 在内存中动态创建li
var li = document.createElement('li');
// 讲li添加到ul
ul.appendChild(li);
// 往li中添加数据，innerText有兼容问题
// li.innerText(data);
setInnerText(li, data);
// 给li注册事件
li.onmouseover = liMouseOver;
li.onmouseout = liMouseOut;
}
}
// 当鼠标经过时执行
function liMouseOver() {
// 高亮显示
this.style.backgroundColor = 'red';
}
// 当鼠标离开时执行
function liMouseOut() {
//取消高亮显示
this.style.backgroundColor = '';
}
//处理inenrText兼容问题
function setInnerText(element, content) {
if (typeof element.innerText === 'string') {
return element.innerText = content;
} else {
return element.textContent = content;
}
}
</script>
</body>
