I want to create some HTML Elements of the same type with a for loop in JavaScript. I wonder if I need to create a new Javascript variable for every element I want to show in the DOM or is it enought to override the same element again and again in my loop?
I wrote this code but it does only show one element as output:
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);
}
Than I wrote the following code but it this applies the same innerHTML to all returned elements.
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]);
}
Which approach is right to generate multiple HTML elements from an array?
No metter, you can create every time new variable or rewrite. Better create variable every time.
your code can be optimized with new features and without any variables:
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>And i don't think that you need any id at all, better to use data-id or something