Почему нельзя вставлять код строками в jQuery

207
15 августа 2018, 11:50

Есть обычная функция .append, есть пример большого кода который надо вставлять, например:

<div class="form category">
   <h4>Столешница</h4>
      <div class="col-xs-12 onem">
         <p class="list_member form_1 col-xs-8">Площадь столешницы</p>
         <span class="col-xs-4 form_1_q">24м2</span>
      </div>
      <div class="col-xs-12 onem">
          <p class="list_member form_1 col-xs-8">Цена столешницы</p>
          <span class="col-xs-4 form_1_q">5000 руб.</span>
      </div>
 </div>

Когда вставляю код в .append так как он есть - выскакивает ошибка всегда, чтоб ее устранить надо записать весь html в строку, например:

 $('.results_block').append('<div class="form category"><h4>Столешница</h4><div class="col-xs-12 onem"><p class="list_member form_1 col-xs-8">Площадь столешницы</p><span class="col-xs-4 form_1_q">24м2</span></div><div class="col-xs-12 onem"><p class="list_member form_1 col-xs-8">Цена столешницы</p><span class="col-xs-4 form_1_q">5000 руб.</span></div></div>');

Это совсем не удобно и как-то странно. Может кто-то сказать в чем причина или как удобней делать?

Answer 1

Почему нельзя вставлять код строками в jQuery. Это совсем не удобно и как-то странно. Может кто-то сказать в чем причина или как удобней делать?

В коллекцию, строковой литерал.

var data = ` 
<div class="form category"> 
   <h4>Столешница</h4> 
      <div class="col-xs-12 onem"> 
         <p class="list_member form_1 col-xs-8">Площадь столешницы</p> 
         <span class="col-xs-4 form_1_q">24м2</span> 
      </div>\ 
      <div class="col-xs-12 onem"> 
          <p class="list_member form_1 col-xs-8">Цена столешницы</p> 
          <span class="col-xs-4 form_1_q">5000 руб.</span> 
      </div> 
 </div> 
 `; 
  $('.results_block').append(data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="results_block"></div>

Answer 2

Потому что переносы строк в inline многострочных строках в js коде надо обозначать "\". Рассматривайте это как эскейп символ перед невидимым символом новой строки.

var data = '\ 
<div class="form category">\ 
   <h4>Столешница</h4>\ 
      <div class="col-xs-12 onem">\ 
         <p class="list_member form_1 col-xs-8">Площадь столешницы</p>\ 
         <span class="col-xs-4 form_1_q">24м2</span>\ 
      </div>\ 
      <div class="col-xs-12 onem">\ 
          <p class="list_member form_1 col-xs-8">Цена столешницы</p>\ 
          <span class="col-xs-4 form_1_q">5000 руб.</span>\ 
      </div>\ 
 </div>\ 
 '; 
  $('.results_block').append(data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="results_block"></div>

Answer 3

Попробуйте так, если я правильно понял о чем вы.

var html = '<div class="form category">' + 
   '<h4>Столешница</h4>' + 
      '<div class="col-xs-12 onem">' + 
         '<p class="list_member form_1 col-xs-8">Площадь столешницы</p>' + 
         '<span class="col-xs-4 form_1_q">24м2</span>' + 
      '</div>' + 
      '<div class="col-xs-12 onem">' + 
          '<p class="list_member form_1 col-xs-8">Цена столешницы</p>' + 
          '<span class="col-xs-4 form_1_q">5000 руб.</span>' + 
      '</div>' + 
 '</div>' 
$('.results_block').append(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="results_block"></div> 

READ ALSO
Как сделать закрытие и открытие сайт бара?

Как сделать закрытие и открытие сайт бара?

не могу сделать что бы, при скролле по странице, определялся пункт под меню, и предыдущий закрылся напримера след открылся

166
OpenCVSharp - неработает функция Absdiff

OpenCVSharp - неработает функция Absdiff

Недавно начал разбираться с библиотекой OpenCVSharpВ чем проблема моего кода?

194
Как расшифровать пароль в обновлённом Yandex браузере?

Как расшифровать пароль в обновлённом Yandex браузере?

В Yandex'e обновили базу SQlite, и теперь просто так её не расшифроватьПодскажите есть ли новый способ расшифровки данных или нет?

451
C# + PowerShell

C# + PowerShell

Хочу в C# через powershell узнать сумму MD5 файла одного, прописал такой небольшой скрипт

165