老师，请检查
来源：4-4 编程练习
慕粉0644535011
2021-11-21 17:08:42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Object.entries()</title>
</head>
<body>
<div id="list">
<!--html结构参考如下：-->
<dl>
<dt>前端</dt>
<dd>Vue</dd>
<dd>Vue</dd>
<dd>Vue</dd>
</dl>
</div>
<script>
var classfies = {
"前端": ["Vue", "Angular", "React"],
"后端": ["Php", "Java", "Python"]
}
/*补充代码*/
const getElemnt = (objClassFies) => {
const list = document.getElementById('list').children[0]
let htmlStr = ''
// 外层循环生成dt
for (const [key, value] of Object.entries(objClassFies)) {
htmlStr = `<dt>${key}</dt>`
list.innerHTML += htmlStr
// 内层循环生成dd
for(arrValue of value){
console.log(arrValue);
htmlStr = `<dd>${arrValue}</dd>`
list.innerHTML += htmlStr
}
}
}
getElemnt(classfies)
</script>
</body>
</html>写回答
2回答
-
同学你好，测试第二次粘贴的代码运行效果如下：
html结构中书写的代码也展示到页面了，建议优化：一开始将div中的内容清空，如下：
祝学习愉快~
1 -
慕粉0644535011
提问者
2021-11-21
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Object.entries()</title> </head> <body> <div id="list"> <!--html结构参考如下：--> <dl> <dt>前端</dt> <dd>Vue</dd> <dd>Vue</dd> <dd>Vue</dd> </dl> </div> <script> var classfies = { "前端": ["Vue", "Angular", "React"], "后端": ["Php", "Java", "Python"] } /*补充代码*/ const getElemnt = (objClassFies) => { const list = document.getElementById('list').children[0] let htmlStr = '' let newArr = [] // 外层循环生成dt for (const [key, value] of Object.entries(objClassFies)) { let newDt = `<dt>${key}</dt>` newArr.push(newDt) // 内层循环生成dd for (arrValue of value) { let newDd = `<dd>${arrValue}</dd>` newArr.push(newDd) } console.log(newArr); } htmlStr = newArr.join('') list.innerHTML += htmlStr } getElemnt(classfies) </script> </body> </html>老师，之前好像没按照题目....
0
