Insert idented HTML into jQuery

Asked

Viewed 73 times

0

Why can’t you put the idented HTML in jQuery? If I put it in "straight" it works, already if I put it indented, to be easier to edit later, it no longer works. Why?

UNFORMATTED, IT WORKS:

$j('<div class="filters"> <div class="title title--sm lucas"><span>FILTROS</span></div> <div class="filters__list"> <div class="filters__filter cor "> <div class="filters__name">Cor </div> <ul class="ul--0"> <li class="li--0"> <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=73" title="Amarelo" class="a--0"> <span class="label">Amarelo</span> </a> </li> <li class="li--0"> <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=74" title="Azul" class="a--0"> <span class="label">Azul</span> </a> </li> <li class="li--0"> <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=76" title="Branco" class="a--0"> <span class="label">Branco</span> </a> </li> </ul> </div> </div> </div>').insertAfter('main.col-main');

FORMATTED, NOT WORKING:

$j('<div class="filters">
   <div class="title title--sm lucas"><span>FILTROS</span></div>
   <div class="filters__list">
      <div class="filters__filter cor ">
         <div class="filters__name">Cor </div>
         <ul class="ul--0">
            <li class="li--0">
               <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=73" title="Amarelo" class="a--0">
               <span class="label">Amarelo</span>
               </a>
            </li>
            <li class="li--0">
               <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=74" title="Azul" class="a--0">
               <span class="label">Azul</span>
               </a>
            </li>
            <li class="li--0">
               <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=76" title="Branco" class="a--0">
               <span class="label">Branco</span>
               </a>
            </li>
         </ul>
      </div>
   </div>
</div>').insertAfter('main.col-main');
javascript jquery

2 answers

3


Because from the moment it is a new line it is a new statement, in which case you need to concatenate the lines to be true as only an instruction:

$j('<div class="filters">' +
   '<div class="title title--sm lucas"><span>FILTROS</span></div>' +
   '<div class="filters__list">').insertAfter('main.col-main');

I put only part of the code to make clear the problem.

  • 1

    Thank you, Lucas, I didn’t know that! :)

  • If the answer answered, could mark as accepted @Lucascarvalho?

  • Yes, of course! I was just waiting, I could not score before 10 minutes I think, but now was.

0

Another way to insert multi-line texts is with strings template of ES6. To declare a template string it is necessary to involve the text by crases, thus:

`<div class="filters">
 <div class="title title--sm lucas"><span>FILTROS</span></div>
`

Thus it dispenses the sign of + to concatenate.

To use it the browser needs to be compatible with this feature or use some transpiler, such as Babel.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.