Generating huge amounts of HTML

Question

I am working on a browser game. I have lots of upgrades, crafting, planets, etc that I generate with jS (1 box (or square?) PER EACH item). Here is a mini snippet from my game, displaying my current method of generating HTML

JSFiddle example

I do a simple loop and insert as many boxes as there are upgrades

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

Then, I put a gigantic HTML code block in a function, and use arrays to identify upgrades ID, name, info...

Is this a good practice to generate loads of HTML content? If not, what can I do to improve it?

Also, I started "coding" a game with one main goal to learn JS. If you have better solutions, but they include a lib (jQuery, etc) then you can post it, but I'm going pure jS here. Thanks!

-- Update --

I've been learning lots of JS in the past year. @DoXicK provided a great example a while ago but I didn't understand it then. This is the final rendering method I come up with, thanks to his examples, and I guess I'll stick with it:

JS:

const game = {};
// make our life easier
const $ = key => document.getElementById(key);
const render = (key, str) => $(key).insertAdjacentHTML("beforeend", str);
// a function that returns upgrades html content
const html = self => `
  
    ${self.name}
    ${self.damage}
  
`;
// object containing each upgrades template
const template = {
  laserGun: {
    id: "laserGun",
    name: "Laser Gun",
    damage: 10
  },
  plasmaGun: {
    id: "plasmaGun",
    name: "Plasma Gun",
    damage: 30
  }
};
// Upgrade class
class Upgrade {
  constructor(upg) {
    this._id = upg.id;
    this._name = upg.name;
    this._damage = upg.damage;
  }

  get id() {return this._id;}
  get name() {return this._name;}
  get damage() {return this._damage;}

  generate() {
    // find div with upgrade id, and inject it's html content inside
    render("upgrade", html(this));
  }

  static make(key) {
    game.upgrade[key] = new Upgrade(template[key]);
    game.upgrade[key].generate();
  }
}

let laserGun = Upgrade.make("laserGun");

HTML:

I hope you find it helpful!

user_321135 · Answer

As i already explained in comments, your code will become quite unmaintainable if you keep it as spaghetti code like that.

I've made an updated example which does the exact same thing as you did, just with a bit of updated javascript and by making a javascript-component out of 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 (`

    
    
        
            
                ${Name}
                
                    
                  
                                
                
                    +
                  
                                
            
            
                
                        
        
        
        
            
                
              
            
             of total
            ${Info}
            
        
    

    `)
  }
}

You use it by doing:

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

For people that do react: yes, it is intended to steer that way.

Generating huge amounts of HTML

1 Answers