我正在尝试使用普通 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);
最佳答案
您需要将值连接到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>
关于javascript - 在 vanilla javascript 中将对象列表打印为链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44988438/