JS Game design - mostly static vs. mostly dynamic HTML

Question

I am new to JS and am coding a game that will be totally client-side. I have a fundamental question about the HTML structure.

Say that the game is going to be a RPG and I want to show the user their character's statistics, like Intelligence 18, Strength 15, Charisma 20 etc.

Now since these values are not static and will change every new turn (the game is turn based) these values need to be filled in by JavaScript. Let's say we want to display them in a list.

As far as I can see there are two ways to do this, one is to keep a static HTML and use JavaScript only to fill in the values like this:

<ul>
  <li>Intelligence:
    <div id="IntValue"></div>
  </li>
  <li>Strength:
    <div id="StrValue"></div>
  </li>
</ul>

And then in JavaScript edit those divs like getElementById("IntValue").innerHTML = "18";

A second method might be to put only <ul id="CharStats"></ul> in the actual HTML file and then generate that entire list with all the <li> elements and such with JavaScript. For example I could create a tableHTML string and then dynamically add all the <ul>'s to it one by one, and then get CharStats and set its innerHTML to that tableHTML string.

Which is better? I know it would depend on the specific case, but can you at least guide me in the direction of some good resources about coding such things with JavaScript?

Answer 1

Both methods are fine, as a matter of fact there are entire frameworks built on rendering html client side to reduce server load - these frameworks need to be supplied with JSON from the server instead of an entire HTML response afterwhich the JS builds the HTML code that basically makes the page.

However in your case you might want to do things differently, look at it this way:

• Method A: Update specific element
• Method B: Refresh entire list every time

Method A, If you only change 1 stat per turn - this is the way to go since you'll be updating less of the DOM at a time but you'll have more ID's to keep track of.

Method B, If you're changing multiple stats per turn then you'll probably want to do this since you can just build the <li>'s and put them inside a ul every turn.

It depends on your situation, Method B does modify the DOM more than Method A but both are good to use.

NOTE

Method B removes more elements than Method A, note that if you have other event handlers bound to the elements being refreshed by Method B you're going to have to reselect these elements since the element you used before will be gone.

Performance wise I would not worry about wether Method A or Method B is best. The one least error prone is probably Method A since you're updating specific elements on the page (less DOM manipulation means less possible errors).

Hope this helps pushing you into the right direction, I linked the framework for reference since it uses a quite cool method of displaying data from the server side ;)

Good luck, Sidney Liebrand