When using the jQuery .html () method to apply multiple lines of text or HTML code to an element, it fails with error:
$(function(){
$( '.qualquerClasse' ).html( ' conteúdo de 3 linhas de código: uma
Duas
Três'
);
});
It will generate the error:
Error: SyntaxError: unterminated string literal
How do I apply multiple lines between the quotation marks?
JavaScript does not allow characters to break literal lines within strings.
There are several ways to work around the problem.
If you really want line breaks within the string, use \n :
$( '.qualquerClasse' ).html( 'conteúdo de 3 linhas de código: uma \n Duas \n Três' );
white-space is pre / pre-wrap /% with%. Otherwise (in most cases) you must use pre-line to force a visible line break.
If you want to break the text into several lines to make it more readable, you can concatenate or use an array:
$( '.qualquerClasse' ).html(
' conteúdo de 3 linhas de código: uma'
+ 'Duas'
+ 'Três'
);
//ou
$( '.qualquerClasse' ).html([
' conteúdo de 3 linhas de código: uma',
'Duas',
'Três'
].join(''));
Of course you can add <br> or \n as needed in these strings.
There is also a non-standard way of "escaping" the line break by putting a <br> just before the literal break:
$( '.qualquerClasse' ).html( ' conteúdo de 3 linhas de código: uma\
Duas\
Três'
);
This syntax is not standard, but it has very good support. However, some browsers keep the line break characters within the string while others discard them, so this form is somewhat inconsistent. Another problem is that adding any character after \ , even a space character, will generate a syntax error since the line break is no longer escaping.
So to complement: I recommend using Coffeescript , a javascript preprocessor (just like SASS / LESS preprocesses CSS ).
Cofeescript offers a much more convenient and readable syntax. One of many advantages is the possibility of defining multi-line strings:
mobyDick = "Call me Ishmael. Some years ago --
never mind how long precisely -- having little
or no money in my purse, and nothing particular
to interest me on shore, I thought I would sail
about a little and see the watery part of the
world..."
Or with """ to keep formatting / indentation:
html = """
<strong>
cup of coffeescript
</strong>
"""
A simple but not very recommended way to make a mistake is simply to break the line break with a \
$( '.qualquerClasse' ).html( ' conteúdo de 3 linhas de código: uma\
Duas\
Três'
);
But the most recommended, error-free, and no-hassle way to code production is the Fabrício Matté here.