【新人求助】有关用element.innerHTML动态创建元素的元素获取问 - javascript吧

level 2

如下代码，我用element.innerHTML动态创建了ul、li后，再想去获取li时就无法获取了，本来是想让鼠标移上去高亮显示的，求大神帮帮看看，非常感谢~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//动态创建列表
var datas = ['西施', '貂蝉', '昭君', '贵妃'];
var box = document.getElementById('box');
//创建空数组
var array = [];
array.push( '<ul>');
//遍历数据
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
array.push('<li>' + data + '</li>');
}
array.push( '</ul>');
//动态创建元素
box.innerHTML = array.join('');
//获取元素
var ul = box.getElementsByTagName('ul');
console.dir(ul);//打印HTMLCollection(1)
var lis = ul.children;
console.dir(lis);//打印undefined
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
li.onmouseover = function () {
this.style.backgroundColor = 'red';
}
li.onmouseout = function () {
this.style.backgroundColor = '';
}
</script>
</body>
</html>

2020年07月02日 13点07分 1

level 12

丶影-奈斯

ul[0] 试试

2020年07月02日 15点07分 2

level 12

丶影-奈斯

给个下标

2020年07月02日 15点07分 3

level 12

丶影-奈斯

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="box"></div>
<script>
//动态创建列表
var datas = ['西施', '貂蝉', '昭君', '贵妃'];
var box = document.getElementById('box');
//创建空数组
var array = [];
array.push( '<ul>');
//遍历数据
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
array.push('<li>' + data + '</li>');
}
array.push( '</ul>');
//动态创建元素
box.innerHTML = array.join('');
//获取元素
var ul = box.getElementsByTagName('ul');
console.dir(ul);//打印HTMLCollection(1)
var lis = ul[0].children; // 改这里加下标 [0]
console.dir(lis);//打印undefined
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
li.onmouseover = function () {
this.style.backgroundColor = 'red';
}
li.onmouseout = function () {
this.style.backgroundColor = '';
}
} // 这里也漏了 }
</script>
</body>
</html>

2020年07月03日 01点07分 4

level 12

丶影-奈斯

2020年07月03日 01点07分 5

level 6

璐村惂鐢ㄦ埛_74bVJQy馃惥

真就细心回答，没有答复呗

2020年07月03日 02点07分 6