1

No jquery, se eu inserir o seguinte código, da erro ::

variavel.append('<div class="qualquer">
                    <div class="subdivs">
                        conteudo da subdiv
                    </div>
                    <div class="subdivs">
                        conteudo da subdiv
                    </div>
                </div>
                    ');

Porém se eu colocar o mesmo código sem quebra de linha, já não da mais erro ::

variavel.append('<div class="qualquer"><div class="subdivs">conteudo da subdiv</div><div class="subdivs">conteudo da subdiv</div></div>');

Minha duvida é

Como evitar esse erro causado pela quebra de linha? Existe um "substituto" pro append para que eu possa inserir o código com quebra de linha?

OBS: Estou tentando aprender mais sobre o JQuery portanto desconheço os meios para realizar tal coisa!

2 Respostas 2

1

O problema ocorre devido as quebras de linhas que impedem a formação da string, que é o argumento aceito pelo append() do jQuery. Você pode resolver isso utilizando \ no final de cada linha, nesse caso será necessário trocar suas aspas duplas (") por simples (') nos conteúdos internos conforme abaixo:

variavel.append("<div class='qualquer'> \
                    <div class='subdivs'> \
                        conteudo da subdiv \
                    </div> \
                    <div class='subdivs'> \
                        conteudo da subdiv \
                    </div> \
                </div>");

resultado: "<div class='qualquer'> <div class='subdivs'> conteudo da subdiv </div> <div class='subdivs'> conteudo da subdiv </div> </div>"

Ou você também pode dividir por linhas, e concatenar uma a uma usando carácter (+) conforme o exemplo a baixo:

variavel.append('<div class="qualquer">' +
                    '<div class="subdivs">' +
                        'conteudo da subdiv' +
                    '</div>' +
                    '<div class="subdivs">' +
                        'conteudo da subdiv' +
                    '</div>' +
                '</div>');

resultado: "<div class="qualquer"><div class="subdivs">conteudo da subdiv</div><div class="subdivs">conteudo da subdiv</div></div>"

A diferença entre os dois é que no primeiro insere semi-colunas no final de cada linha, já o segundo concatena diretamente. Lembrando que ambos pode ser adicionado a uma variável e você pode setar a mesma em seu append().

2
  • Interessante. A solução é mais simples do que eu poderia imaginar! Commented 31/08/2015 às 21:34
  • editei o post explicando o problema, para um melhor intendimento :)
    – Brunno
    Commented 31/08/2015 às 21:40
0

Pode usar o \n:

$('#teste').append('<div class="qualquer">\n<div class="subdivs">\nconteudo da subdiv\n</div>\n<div class="subdivs">\nconteudo da subdiv\n</div>\n</div>');

https://jsfiddle.net/uv3nqemj/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .