how to repeat the same code (but slightly different each time) in html?

Question

So i'm working on a project, and one page has the same basic code over and over and I was wondering how to do this quicker than copy/pasting the code 721 times

<div class="pokeFloat">
  <div class="pokeDec">
    <p>
      <img class="pokeImg" src="./img/pokeDex#.jpg" />
      <br>
      <small>PokeDex#</small>
      <br>pokemonName
      <br>
      <span class="typeA">TypeA</span class="TypeA"> - <span class="TypeB">TypeB</span class="TypeB">
 </p>
  </div>
</div>

Each time i'd have to change pokeDex# (twice, once in the link the other in the text), pokemonName, and the two types, and it would be great if there was a quicker way to do this.

**P.S.:** You've have an error in your code: A closing tag (like ``) couldn't have any attributies! — H. Pauwelyn, Aug 20 '16 at 15:28
Are you saying that you are currently copy, pasting and then changing this code all by hand? That you are looking for a way to save time when performing that (one-off?) task? — Makyen, Aug 20 '16 at 15:32
Presumably you have a list of the files. What format is that list currently in (flat text?, just files in a directory?)? — Makyen, Aug 20 '16 at 15:33
Either use a server side language (Like PHP) or use a javascript framework like AngularJS that allows you to loop over data (either from a data source or hard-coded values) — Paradoxis, Aug 20 '16 at 22:16
Angular JS is your best choice.. you can use ng-repeat over the 721 elements. — aleberguer, Aug 20 '16 at 22:17

Scott · Accepted Answer · 2016-08-21T01:30:23.510

You can merely target a parent container then use jQuery to create the amount of items you need. One line of HTML... then a jQuery loop to fill that container with everything else, 721 times.....

var num = 721; //number of times you want definitions

for(var i = 1; i <= num; i++) {
    var theContent = $("<p></p>").html('<small>PokeDex #' + i + '</small> : <a href="/path/to/dex' + i +'">Dex ' + i + ' Link</a>'); 
         $('#pHolder').append(theContent);
     }

p { background: #eee; margin: 10px; padding: 5px 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pHolder"></div>

vanilla Javascript (no jQuery)

var elem = document.getElementById("pHolder"); //The holder
 var num = 721; //number of times you want definitions

for(var i = 1; i <= num; i++) {
     var p = document.createElement('p');
     p.innerHTML = '<small>PokeDex #' + i + '</small> : <a href="/path/to/dex' + i +'">Dex ' + i + ' Link</a>';
  elem.appendChild(p);
     }

p { background: #eee; margin: 10px; padding: 5px 10px; }

    <div id="pHolder"></div>

Fiddle with the div...

I like this, however I'm not sure how is actually change the pokemonName and type values — Skwarka, Aug 21 '16 at 14:43
@Skwarka kind of depends on where the data is coming from, if it's all manual input anyway... you could do a switch to iterate through an array containing the list of names and other individual data.. Not ideal, but much better than typing names manually. This was just to show you *how*. I wasn't expecting it to be a direct copy/paste solution. — Scott, Aug 21 '16 at 18:00

Fernando · Answer 2 · 2016-08-21T01:58:24.750

If you can't use a serve-side technology, or something that compiles to html as Haml, and you want to use javascript and html... with a little help of jquery so you don´t have reinvent the wheel....

One solution would be to hide the html that you use as template. Then, using jquery (or other library or vanilla javascript) grab it as a string, do the replacements, and then insert the resulting string as html into the dom.

Here is a quick example with just three iterations. You will need to populate the specific data of each repetition. I use a list of objects, as the data.

If I were you I would use a library like Knockout, Angular, or Mustache.

// Data of each iteration
var data = [
  {name: 'Pikachu', dex: 'pikachuDex', typeA: 'pikachuA', typeB: 'pikachuB'},
  {name: 'Charmander', dex: 'charmanderDex', typeA: 'charmanderA', typeB: 'charmanderB'},
  {name: 'Ratata', dex: 'ratataDex', typeA: 'ratataA', typeB: 'ratataB'}
];
  
// Get the template
var template = $(".pokeFloat").html();

// Iterate over data, customize template, append to html
for(var i = 0; i < data.length; i++) {
  var str = template.replace(/typeA/gi, data[i].typeA);
  str = str.replace(/typeB/gi, data[i].typeB);
  str = str.replace(/pokemonName/gi, data[i].name);
  str = str.replace(/pokeDex/gi, data[i].dex);
  
  $("#list_of_pokemones").append(str)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pokeFloat" style="display: none">
      <div class="pokeDec">
        <p>
          <img class="pokeImg" src="./img/pokeDex#.jpg" />
          <br>
          <small>PokeDex#</small>
          <br>pokemonName
          <br>
          <span class="typeA">TypeA</span class="TypeA"> - <span class="TypeB">TypeB</span class="TypeB">
     </p>
      </div>
    </div>

<div id="list_of_pokemones">
</div>

Please, note that I hid the template using display: none, and added a new div as placeholder for the dynamically generated html.

It is not the best solution, but should give you an idea about how to do it.

Do not iterate arrays with `for...in`, do not parse HTML with regex, etc. — Oriol, Aug 21 '16 at 01:49
See [Why is using “for…in” with array iteration a bad idea?](http://stackoverflow.com/q/500504/1529630) and [You can't parse \[X\]HTML with regex.](http://stackoverflow.com/a/1732454/1529630) — Oriol, Aug 21 '16 at 01:59
@oriol About the for..in, I get your point, but in this context is the same. Anyway, I fixed that. But about regex, I agree that there are better options, but beside performance, I don't see how it could be a problem in this particular example. Besides, my idea is to be a guide about how to think the problem. If you would like to pinpoint a problem, a bigger one is that my solution does not clone the root node, only the inner html. — Fernando, Aug 21 '16 at 02:09

how to repeat the same code (but slightly different each time) in html?

2 Answers2