How to break the html in append()?

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!

Seems likely that this HTML ought to be stored somewhere else. Like... in HTML! — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Jul 1, 2011 at 14:10

vcsjones · Accepted Answer · 2011-07-01 14:06:51Z

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

Collectives™ on Stack Overflow

How to break the html in append()?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related