title: Generating huge amounts of HTML
body: <p>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</p>
  
  <p><a href="https://jsfiddle.net/MiloSx7/7L8e5kmg/1/" rel="nofollow noreferrer">JSFiddle example</a></p>
  
  <p>I do a simple loop and insert as many boxes as there are upgrades</p>
  
  <pre><code>for(i = 0; i &lt; 9; i ++)
  </code></pre>
  
  <p>Then, I put a gigantic HTML code block in a function, and use arrays to identify upgrades ID, name, info... </p>
  
  <p>Is this a good practice to generate loads of HTML content? If not, what can I do to improve it?</p>
  
  <p>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!</p>
  
  <p>-- Update --</p>
  
  <p>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:</p>
  
  <p>JS:</p>
  
  <pre><code>const game = {};
  // make our life easier
  const $ = key =&gt; document.getElementById(key);
  const render = (key, str) =&gt; $(key).insertAdjacentHTML("beforeend", str);
  // a function that returns upgrades html content
  const html = self =&gt; `
    &lt;div class="some-class" id="${self.id}"&gt;
      &lt;h2&gt;${self.name}&lt;/h2&gt;
      &lt;p&gt;${self.damage}&lt;/p&gt;
    &lt;/div&gt;
  `;
  // 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");
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="upgrade-container" id="upgrade"&gt;
  </code></pre>
  
  <p>I hope you find it helpful!</p>