Question

Any trick I can use to break the html in append()?

For instance, something like this would be great!

// 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>");

so that I don’t have to do the html in one line – it’s difficult to read and debug!

Answer 1

You have two options. You can use the new line literal syntax:

// 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>");

This works, but may confuse some IDEs (Visual Studio does that last time I tried it. Or you can make each line it’s own string and concatenate the strings if you don’t actually want new lines:

// 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>");