Large HTML, line breaks and .html() method using jQuery

Question

I have to dynamically load the following HTML in a DIV using jQuery .html() method.

<div class="box-gerenciamento-versoes-variacoes">
    <div class="detalhes-versao">
        <p><span>Cor</span> do produto:</p> <img src="/admin/imagens/cores/preto-amarelo.png" height="18" width="18" title="Preto e amarelo" alt="" /> <span class="nome-cor">Preto e amarelo</span>
    </div>

    <div class="box-enviar-fotos">
        <input type="button" class="botao-enviar-fotos" value="" /> 0 fotos enviadas
    </div>

    <div class="div_clear"></div>

    <div class="etiquetas-tamanho-estoque">
        <p class="etiqueta-tamanho">Tamanho:</p>
        <p class="etiqueta-estoque">Estoque:</p>
    </div>

    <ul class="gerenciamento-tamanho">
        <li>
            PP
            <input type="text" />
        </li>
        <li>
            P
            <input type="text" />
        </li>
        <li>
            M
            <input type="text" />
        </li>
        <li>
            G
            <input type="text" />
        </li>
    </ul>

    <div class="div_clear"></div>
</div>

As you can see, the content isn't small, and the .html() method doesn't allow line breaks, so to load this content I have to remove all line breaks, but doing this the code will be ugly, what will difficult the app maintenance.

How do I load a large part of content of HTML using the jQuery .html() method while keeping good readability?

Why do you need to do it using `.html()`? I would have (for example) put this HTML in a hidden DIV (`style="display:none"`) and use `.show()` instead. — sp00m, Apr 19 '12 at 15:39
@sp00m, I can't do this because i don't know how many boxes the user will create. He can create 1, 3, 8 or any other quantity, so the Javascript will create them dynamically. Anyway, thanks for your tip! — Marcio Mazzucato, Apr 19 '12 at 16:05

score 12 · Accepted Answer · answered Apr 19 '12 at 15:35

12

alert("Just put a backslash\
at the end of your lines\
to allow line breaks\
in JavaScript");

answered Apr 19 '12 at 15:35

sp00m

47,968
31
142
252

score 2 · Answer 2 · answered Apr 19 '12 at 15:48

2

var newHtml = $('.box-gerenciamento-versoes-variacoes').html().replace(/(\r\n|\n|\r)/gm,"");
$('.box-gerenciamento-versoes-variacoes').empty().html(newHtml);

answered Apr 19 '12 at 15:48

thecodeparadox

86,271
21
138
164

Large HTML, line breaks and .html() method using jQuery

2 Answers2