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?

Answer 1

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