老师我这道题做出来效果是并排显示的。

var classfies = {

"前端": ["Vue", "Angular", "React"],

"后端": ["Php", "Java", "Python"]

}

var html='';

for(let key of Object.entries(classfies)){ //循环遍历

html+=key

}

var list=document.getElementById('list')

list.innerHTML=html

效果：前端,Vue,Angular,React后端,Php,Java,Python

在这里输入代码，可通过选择【代码语言】突出显示

Vigorous阿炎 2020-11-21

源自：ES6 的新增方法 4-4 编程练习

收起

1回答

好帮手慕言 2020-11-21 18:04:32

同学你好，因为内容直接放到了div标签里面，会在一行显示的，结构如下：

建议：把内容放到dl、dt、dd标签中，代码参考：

<script>

    var classfies = {
      "前端": ["Vue", "Angular", "React"],
      "后端": ["Php", "Java", "Python"]
    }
    var html = '';
    for (let [key, value] of Object.entries(classfies)) { 
      // dl的开始标签
      html += '<dl>';
      // 用来存放内容的数组
      var result = [];
      // 生成dt标签，并放到result数组中
      result.push(`<dt>${key}</dt>`)
      // 通过循环生成dd标签，并放到result数组中
      value.forEach(item => {
        result.push(`<dd>${item}</dd>`)
      })

      // 通过join方法，拼接成一个字符串整体
      html += result.join("") + '</dl>'
    }
    // 获取元素
    var list = document.getElementById('list')
    // 把拼接的内容放到list中
    list.innerHTML = html

  </script>