Question

I am trying to add some html after a specific h1 tag. The line of html is long and I would like to break it down to multiple lines within the .after function.

Below is the code:

$(document).ready(function() {
    $('#content-main-cell h1').addClass('index-title');
        $('.index-title').after('<div class="mds-logo"><img src="http://marines.mil/unit/marforres/4thMarDiv/23rdMar/1stBn/img/battalion-logo.jpg"/></div>');
});

How do I break this down into multiple lines within the code and have it work ? Do I use a ; at the end of each line ?

Answer 1

You can continue a string literal on a subsequent line with a backslash:

$(document).ready(function() {
    $('#content-main-cell h1').addClass('index-title');
        $('.index-title').after(
            '<div class="mds-logo">\
            <img src="http://marines.mil/unit/marforres/4thMarDiv/23rdMar/1stBn/img/battalion-logo.jpg"/></div>'
        );
});

This is defined by Section 7.8.4 (“String Literals”) of the spec. I don’t know that I’d trust all parsers to get it right, not least because it was just introduced in the 5th edition specification, but it appears that the spec was codifying previous standard practice as even IE6 understands it. (As do — in my tests — IE7, IE9, Chrome, Firefox, Opera, and Safari.) Of course the whitespace at the beginning of the next line is part of the string, which probably isn’t what you want.

Alternately, just use string concatenation:

$(document).ready(function() {
    $('#content-main-cell h1').addClass('index-title');
        $('.index-title').after(
            '<div class="mds-logo">' +
            '<img src="http://marines.mil/unit/marforres/4thMarDiv/23rdMar/1stBn/img/battalion-logo.jpg"/></div>'
        );
});

You’re not in a tight loop, so even if the parser doesn’t concatenate on the fly (and a good one will), having the concat operation occur when you call after won’t do any real harm.