在原版中将对象列表打印为链接 javascript

Question

我正在尝试使用 vanilla 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.In 您的情况它始终是将在 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>

在原版中将对象列表打印为链接 javascript

printing list of objects as links in vanilla javascript

javascript

loops

object

innerhtml