Creating a huge amount of HTML files

Question

I am working on a browser. I have many updates, processing, planets, etc. that I generate using jS (1 square (or square?) PER EACH item). Here is a mini snippet from my game showing my current HTML generation method

JSFiddle example

I make a simple loop and insert as many boxes as there are updates

for(i = 0; i < 9; i ++)

Then I put a giant block of HTML in a function and use arrays to identify update identifiers, name, information ...

Is it good practice to create downloads of HTML content? If not, what can I do to improve it?

In addition, I began to “encode” the game with one main goal to learn JS. If you have better solutions, but they include lib (jQuery, etc.), you can post it, but I will be pure jS here. Thank!

Answer 1

As I explained in the comments, your code will become completely indispensable if you save it as a spaghetti code.

I made an updated example that does the same thing as you, just with a little updated javascript and making the javascript component from your "template".

https://jsfiddle.net/7L8e5kmg/3/

class UpgradeBlock {
    constructor(props) {
      this.props = props;
  }
  render() {
    let { Id, Name, Info, Res } = this.props;
    // basically:
    // let Id = this.props.Id;
    // let Name = this.props.Name;
    // etc
    return (`
<div class="hud-item" id="${Id}">
    <img src="client/img/${Id}.png" id="${Id}Img" />
    <div class="hud-tooltip f16 fwhite">
        <div class="hud-tt-header-container">
            <div class="hud-tt-info-container">
                <div class="col-full">${Name}</div>
                <div class="col-half">
                    <img style="vertical-align: text-bottom;" src="img/${Res}16.png" />
                  <span id="${Id}Cost"></span>
                                </div>
                <div class="col-half">
                    +<span id="${Id}dmgPerLv"></span>
                  <img style="vertical-align: text-bottom;" src="client/img/character/dps16.png" />
                                </div>
            </div>
            <div class="hud-tt-lv-container">
                <canvas id="${Id}Bar" width="64px" height="64px"></canvas>
                        </div>
        </div>
        <hr/>
        <div class="hud-tt-info-container">
            <div class="col-half fwhite f16">
                <img style="vertical-align: text-bottom" src="client/img/character/dps16.png" />
              <span id="${Id}Dmg"></span>
            </div>
            <div class="col-half fgrey f10"><span class="fwhite f16" id="${Id}ofTotal"></span> of total</div>
            <div class="col-full fgrey f10">${Info}</div>
            <div class="col-full f10" id="${Id}click"></div>
        </div>
    </div>
</div>
    `)
  }
}

You use it by doing:

let upgrade = {
  Id: 'id', 
  Name: 'name',
  Info: 'info',
  Res: 'res'
};
let html = new UpgradeBlock(upgrade).Render()

For people who really respond: yes, it should be directed this way.