老师，请检查！
来源：4-4 编程练习
慕粉5491258
2021-03-14 10:42:29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="list">
<!--html结构参考如下：-->
<dl id="dll">
<dt>前端</dt>
<dd>Vue</dd>
<dd>Vue</dd>
<dd>Vue</dd>
</dl>
</div>
<script>
// 1. 声明一个保存列表结构的变量htmlStr，初始值为空字符串
// 2. 使用Object.entries()方法，获取对象classfies的属性（key）和值（value）；通过属性key，生成dt标签；再通过value，生成该分类下所有的dd标签；一共遍历两次，要对应生成两组dl>dt>dd标签
// 3. 使用模板字符串，将生成的html结构字符串，都拼接到htmlStr上
// 4. 获取list的dom对象，设置其内容为变量htmlStr
var classfies = {
"前端": ["Vue", "Angular", "React"],
"后端": ["Php", "Java", "Python"]
}
/*补充代码*/
const dll = document.getElementById('dll');
let htmlStr = [];
for (const [key, value] of Object.entries(classfies)) {
// console.log(key,value);
let inner = [];
for (let i = 0; i < value.length; i++) {
inner.push(`<dd>${value[i]}</dd>`);
// console.log(inner);
}
htmlStr.push(`<dt>${key}</dt>
${inner.join('')}`);
console.log(htmlStr);
}
dll.innerHTML = htmlStr.join('');
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2021-03-14
同学你好，代码实现是正确的，继续加油，祝学习愉快~
0
