javascript - 在 vanilla javascript 中将对象列表打印为链接

Question

我正在尝试使用普通 JavaScript 打印对象列表。在我的循环中，只有最后一项被打印。我该如何解决？我尝试将每个 li 附加到一个变量(节点)，然后将其附加到我的 ul id，但这不起作用。这是 fiddle :

https://codepen.io/anon/pen/LLgZzw?editors=1011

HTML

<ul id="list"></ul>

JS

let list = document.getElementById('list');

let obj = {
  "codepen": 'www.codepen.io',
  "jsfiddle": 'www.jsfiddle.com',
  "jsbin": 'www.jsbin.com'
};
function printList(obj){
  for(let key in obj){
    console.log(key);
    list.innerHTML = `<li><a href= ${obj[key]}>${key}</a></li>`;
  }
  //list.appendChild(li);
}
printList(obj);

Answer 1

您需要将值连接到innerHTML。在您的情况下，它始终是将在innerHTML中设置的迭代的最后一个值

let list = document.getElementById('list');

let obj = {
  "codepen": 'www.codepen.io',
  "jsfiddle": 'www.jsfiddle.com',
  "jsbin": 'www.jsbin.com'
};

function printList(obj) {
  for (let key in obj) {
    console.log(key);
    //Changed here. added + before ==.It will concat the current value with previous value
    list.innerHTML += `<li><a href= ${obj[key]}>${key}</a></li>`;
  }
  //list.appendChild(li);
}
printList(obj);

<ul id="list"></ul>