How is the display of objects on the page correctly implemented?

Question

JavaScript

Let's say there is a class:

class ItemsOnBord{
  constructor(header, description, price, href, website, websites){
    this.header = header;
    this.description = description;
    this.price = price;
    this.href = href;
    this.website = website;
    this.websites = websites;
  }
        render(){};
}

There can be many such items on a page. The data for the object is obtained from the loop. I wanted to create a new object in the same cycle, and use the render method to display it on the page. But a variable, one and a reference to an object, will be overwritten every iteration. Please let me know how it is usually done. Or am I the only smart guy who decided to make the items on the page objects.

On the other hand, we have Class Users, when a person registers, a new object is created. This object is assigned a variable, for example, to use methods. How this is done, I do not understand.

Answer 1

Objects just have nothing to do with the DOM, but to make your life easier you can go to web components, or use Vue logic (not only), where a single-file component is the same, read, a class (properties → data\props) and a template to render on the page.