How to assign HTML code to a Javascript variable?

Question

I have the following HTML code:

<table class="al-center" style="width: 520px;">
            <tr>
                <td>
                    <div class='form-group'>
                        <label class='control-label' for='auto'>RECEBIDO POR*</label>
                        <input  type='text' class='autofocus form_campos form_campos_simples' id='auto' name='verifica_nome'>
                        <input name='cliente' type='hidden'>
                    </div>
                    <div class='form-group'>
                        <label class='control-label' for='qtd'>QTD*</label>
                        <input  type='text' class='form_campos form_campos_ddd' id='qtd' name='qtd'>
                    </div>
                </td>
            </tr>
        </table>

I need to put it inside a Javascript variable, which is inside this code:

<script>
$('input[name="qtd"]').on('keyup click', function(){

    var qtd = $(this).val();

    if(qtd > 0) {
        $('#inputs table').remove();
        var appending = '<table class="al-center" style="width: 520px;">';

        for(var i = 1; i <= qtd; i++) {
            appending += 'Tenho que por ele aqui';
        }

        appending += '</table>';
        $('#inputs').append(appending);
    }else {
        $('#inputs table').remove();
    }
});
</script>

It works if I put everything on a line, the problem is complicated for me to maintain and understand the code.

How to indent HTML?

Answer 1

if you prefer, instead of concatenating strings in your code, you can use a resource from HTML5, templates.

if you need a template more complex and keeping the code readable is important to you, I advise you to look for some Template Engine, such as the Handlebars

follows a simple example using the tag template.

var qtd = document.getElementById("qtd");
var tabela = document.getElementById("tabela");
var tmplLinha = document.getElementById("tmplLinha").content;

qtd.addEventListener("input", function (event) {
  while (tabela.firstChild) {
    tabela.removeChild(tabela.firstChild);
  }
  
  for (var i = 0; i < qtd.valueAsNumber; i++) {
    var linha = document.importNode(tmplLinha, true);
    tabela.appendChild(linha);
  }
})

<label>
  Quantidade:
  <input type="number" id="qtd" name="qtd" />
</label>

<table id="tabela" class="al-center" style="width: 520px;">

</table>

<template id="tmplLinha">
  <tr>
    <td>
      <div class='form-group'>
        <label class='control-label' for='auto'>RECEBIDO POR*</label>
        <input  type='text' class='autofocus form_campos form_campos_simples' id='auto' name='verifica_nome'>
        <input name='cliente' type='hidden'>
      </div>
      <div class='form-group'>
        <label class='control-label' for='qtd'>QTD*</label>
        <input  type='text' class='form_campos form_campos_ddd' id='qtd' name='qtd'>
      </div>
    </td>
  </tr>
</template>

Answer 2

We can say that we can’t do without doing enough gambiarra.

var html = '
  <div>                              \
    <span>\'Algo aqui\'</span>       \
  </div>                             \
';

If it has simple quotes she has to escape.

Otherwise I’d have to concatenate, I guess it doesn’t pay.

In Ecmascript 6, which may not yet be safe to adopt for public websites, it is possible to do so:

var html = `
  <div>
    <span>Algo aqui</span>
  </div>
`;

I put in the Github for future reference.