从数组中创建多个HTML元素

Question

我想在JavaScript中创建一些具有for循环的相同类型的HTML元素。我想知道我是否需要为我想在DOM中显示的每个元素创建一个新的Javascript变量，或者它是否足以在我的循环中一次又一次地覆盖相同的元素?

我写了这段代码，但是它只显示一个元素作为输出:

let i;    
for( i = 0; i < events.length; i++){
let tabElement = document.createElement("div");
tabElement.className = "tabElement";
tabElement.className = "ellipsis";
tabElement.id = "tabElement" + i;
tabElement.innerHTML = events[i].name;

let tabElementLink = document.createElement("a");
tabElementLink.className = "tabElementLink";
tabElementLink.id = "tabElementLink" + i;

$("tabElementLink").append(tabElement);
$(".tabBar").append(tabElementLink);
}

然后我写了下面的代码，但是如果这将相同的innerHTML应用到所有返回的元素。

let tabElements = {};
let tabElementsLink = {};
let i;
for( i = 0; i < events.length; i++){
tabElements['tabElement' + i] = document.createElement("div");
tabElements['tabElement' + i].className = "tabElement";
tabElements['tabElement' + i].className = "ellipsis";
tabElements['tabElement' + i].id = "tabElement" + i;
tabElements['tabElement' + i].innerHTML = events[i].name;

tabElementsLink['tabElementLink' + i] = document.createElement("a");
tabElementsLink['tabElementLink' + i].className = "tabElementLink";
tabElementsLink['tabElementLink' + i].id = "tabElementLink" + i;
tabElementsLink['tabElementLink' + i].append(tabElements['tabElement' + i]);
$(".tabBar").append(tabElementsLink['tabElementLink' + i]);

}

哪一种方法是正确的从一个数组生成多个HTML元素?

Answer 1

没关系，每次都可以创建新的变量或者重写。最好每次都创建一个变量

你的代码可以使用新特性进行优化，而不需要任何变量:

const events = [
{
name: "event1"
},
{
name: "event2"
},
{
name: "event3"
}
]
// if events is iterable 
events.forEach((event, index)=>{
// for next lines, you forget href
$(".tabBar").append(`<a href="link${index}" class="tabElementLink" id="tabElementLink${index}"><div class="tabsElement ellipsis" id="tabelement${index}">${event.name}</div></a>`)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabBar"></div>

我认为你根本不需要任何id，最好使用data-id或其他东西