How to assign HTML code to a JavaScript variable?

Navigation
3

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 in a line, the problem and it gets complicated for me to maintain and understand the code.

How to put HTML with the indentation of it?

    
asked by anonymous 30.06.2016 / 14:44

2 answers

6

If you prefer, instead of concatenating strings in your code, you can use a feature of HTML5 , templates .

If you need a more complex%% and keep the readable code relevant to you, I suggest you look for some template , such as HandleBars

Follow a simple example using the Template Engine tag. 

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>
    
30.06.2016 / 15:41
2

We can say that it can not do without doing a lot of gambiarra. 

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

If you have single quotes, you have to escape it.

Outside this would have to be concatenating, I think it does not pay.

In EcmaScript 6, which is still not safe to adopt for public sites, you can do this: 

var html = '
  <div>
    <span>Algo aqui</span>
  </div>
';
    
30.06.2016 / 14:55
Customize error message How to do a foreach loop with limit in C #?