Форматирование строк jQuery, которые должны охватывать несколько строк

Одна хорошая вещь с jQuery заключается в том, что синтаксис (например, при цепочке) позволяет вашему script охватывать несколько разрывов строк для удобства форматирования и чтения.

Есть ли эквивалентный/предпочтительный метод, когда вы добавляете большую строку HTML?

Например, было бы неплохо сделать что-то вроде этого:

 $("#theObject")
    .doSomething()
    .append("
        <div>
             <div>
                  Hello World
             </div>
        </div>
    ")

Это не работает, но есть ли что-то похожее на это, чтобы упростить чтение HTML, отформатированного в jQuery script?

Ответ 1

Добавьте\в конец каждой строки

$("#theObject").doSomething()
.append("
    <div>\
         <div>\
              Hello World\
         </div>\
    </div>\
")

Изменить 2016:

Если вы используете ES6 (ES2015), теперь вы можете использовать шаблонные литералы.

Ответ 2

 $("#theObject")
.doSomething()
.append(
    "<div>"
         +"<div>"
              +"Hello World"
         +"</div>"
    +"</div>"
);

Было бы лучше всего загрузить ваш .append() контент в виде var, например:

var append_me =
     "<div>"
         +"<div>"
              +"Hello World"
         +"</div>"
    +"</div>";

$("#theObject").doSomething().append(append_me);

Ответ 3

Если вы используете jQuery, и ваши строковые литералы будут html-элементами, вы также можете просто создать эти элементы непосредственно на странице и скрыть их, а затем обратиться к тем элементам DOM, а не вводить их как строки. Например, вы можете разместить это на своей странице:

<div id="myContent" style="display: none;">
    <div>
        <div>
            Hello World
        </div>
    </div>
</div>

И затем перепишите свой код следующим образом:

$("#theObject")
.doSomething()
.append(
    $('#myContent').html();
);

В качестве альтернативы вы можете добавить сам фактический элемент DOM, если вам нужно всего лишь ссылаться на него один раз, а не копировать его содержимое каждый раз.

Ответ 4

Это можно сделать проще!

Не используйте "+" или "/".

Использовать обратную сторону: `

$("#theObject").doSomething()
.append(`
    <div>
         <div>
              Hello World
         </div>
    </div>
`)

Ответ 5

Не существует элегантного способа представления хорошей структуры дерева HTML в Javascript, используя строки. Вам просто придется использовать кучу конкатенации, которая всегда будет уродливой, и я могу добавить, что она работает ужасно. Это то, что я делаю:

Напишите мою разметку в моем любимом редакторе со всеми пробелами, которые я хочу
Сохраните его в том же месте, что и ваш JS файл, с тем же именем + ".txt" в качестве расширения
В моем редакторе есть поиск и замена с помощью RegEx, поэтому я все-таки заменяю что-то вроде >[\s]*<
Скопируйте однострочный результат в файл Javascript как строковую переменную
Отменить замену на .txt файле

Это подразумевает, конечно, что в любое время, когда вы измените разметку, вам нужно будет повторно заменить и скопировать ее. Тем не менее, я привык к этой привычке. Кроме того, jQuery сможет обрабатывать это быстрее, потому что будет меньше символов для синтаксического анализа.

Ответ 6

var str  = '<div>';
str += '<div>';
str += 'Hello World';

$("#theObject")
    .doSomething()
    .append(str)