Defining constants in HTML

Question

I have mulitple tables across 3 HTML pages , the heading of these tables are to remain same i.e .

<thead>
<tr>
 <th>MyHeading</th>
</tr>
</thead>

I want to store the MyHeading string in a constant and use it across HTML pages in all my tables. I am constrained to use pure HTML and javascript. How do i do this in pure HTML i.e. storing static text in some constants so that I could reuse them across HTML pages

HTML has no concept of variables, constants or anything "dynamic". It's purely a *markup language*. — deceze, Jun 14 '16 at 09:26
Sorry but how is this question a duplicate of the related question? Where is OP answer there? — Jaqen H'ghar, Jun 14 '16 at 09:47
I wanted to post an answer but the question was closed. take a look in this [JSFiddle](https://jsfiddle.net/kcs4qy99/) I made. You can share the JS part across your html files and it will replace placeholders with your `const`. Side Note: you can change `const` to `var` if you want more [compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const#Browser_compatibility). — Jaqen H'ghar, Jun 14 '16 at 10:04
Okay thanks . Is this how we usually achieve maintainability in HTML ? — Manas Saxena, Jun 14 '16 at 10:13
No my friend it is a possible hack. A working one, but still a hack. :) Usually to achieve it you should use some third party js but you mentioned you cannot use any :) — Jaqen H'ghar, Jun 14 '16 at 10:18

score 2 · Answer 1 · answered Jun 14 '16 at 09:28

IN HTML it is not possible. Either u have use some templating language and javascript. By using javascript, here is your answer

var length = document.getElementsByClassName('head').length;
for(var i=0; i< length; i++) {
  document.getElementsByClassName('head')[i].innerHTML = "Demo Head";
}

<table style="width:100%">
  <tr><th class="head">heading</th></tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
<table style="width:100%">
  <tr><th class="head">heading</th></tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

I guess this will work if we have multiple tables in the same HTML page.For a table in different HTML page i will have to rewrite the js code to populate the `` inner html . It does not achieve the benefit of maintainability which is the reason i wanted to have a constant. So, are you suggesting to keep the js script in some common place and the multiple HTML pages can call the js function which populates the `` on document ready? — Manas Saxena, Jun 14 '16 at 09:57

Defining constants in HTML

1 Answers1