Как сломать HTML в append ()?

Question

Любой трюк, который я могу использовать, чтобы сломать HTML в append()?

Например, что-то вроде этого было бы здорово!

// Append a popup for displaying the security checking form.
$(document.body).append("
<div id='popup-result' class='popup-outer'>
<div class='popup-inner'>
    <div class='close'><a href='#' class='button-close'>x close</a></div>
    <div class='respond-message'></div>
    <div class='form-confirm'></div>
</div>
</div>");

чтобы мне не приходилось делать html в одной строке - это трудно читать и отлаживать!

Answer 1

У вас есть два варианта.Вы можете использовать синтаксис новой строки:

// Append a popup for displaying the security checking form.
$(document.body).append("\
<div id='popup-result' class='popup-outer'>\
<div class='popup-inner'>\
    <div class='close'><a href='#' class='button-close'>x close</a></div>\
    <div class='respond-message'></div>\
    <div class='form-confirm'></div>\
</div>\
</div>");

Это работает, но может сбить с толку некоторые IDE (Visual Studio делает это в прошлый раз, когда я пытался это сделать. Или вы можете сделать каждую строку отдельной строкой и объединить строкиесли вы на самом деле не хотите новых строк:

// Append a popup for displaying the security checking form.
$(document.body).append(
"<div id='popup-result' class='popup-outer'>" +
"<div class='popup-inner'>" +
    "<div class='close'><a href='#' class='button-close'>x close</a></div>" +
    "<div class='respond-message'></div>" +
    "<div class='form-confirm'></div>" +
"</div>" +
"</div>");