I'm developing a dynamic page with javascript.
I'm not that advanced with the language, I'm trying to collect the name of the classes defined in the div through the html object variable,
so far I created a loop to repeat the structure created dynamically, assign a class: object to define as a class name for each block created through the objects variable
however I would like to use the name of each class summarized as a variable or if there is a way in which I could simply call the block and dynamically create html structure within it without the others clone the same.
//data.js
const html = [
{
id: 0,
class: 'hero',
titulo: "Teste",
},
{
id: 1,
class: 'section_1',
titulo: "Teste 2",
},
];
//index.js
const global = app => {
const p = document.createElement("p");
const div = document.createElement("div");
let main = document.getElementById("main");
// get names and set div all class name
for (let i = 0; i < html.length; i++) {
div.setAttribute("class", 'section ' + app.class);
}
//creat el div
main.append(div);
div.append(p);
p.innerHTML = "Hello World";
}
html.forEach(app => global(app));
<!-- begin snippet: js hide: false console: true babel: false --><html>
<body>
<main id="main">
</main>
</body>
</html>