Attribute name to variavel javascript

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.

// objs 
const html = [
    {
        id: 0,
        class: 'hero',
        titulo: "Teste",
    },
    {
        id: 1,
        class: 'section_1',
        titulo: "Teste 2",
    },
];

// main code
let section = document.createElement("section");
let el_page = document.getElementById("main");

const global = app => {

    const main = document.getElementById("main");
    const div = document.createElement("div");

    // get names and set div all class name
    for (let i = 0; i < html.length; i++) {
        div.setAttribute("class", app.class);
    }
    //creat el div
    main.append(div);
}

html.forEach(app => global(app));
    <main id="main">
teste
    </main>