rdspoons
09-22-2010, 12:04 PM
This is one of those - it's well know by a lot of people, but not every one knows it - type of entries.
In javascript you can use a back-slash to contiue a quoted line.
Your scripted html and text fragments are easier to read and modify when you use the back-slash as a line continuation marker.
No extra quotes are required when using this method, just append a trailing back-slash to each line, except for the last, and you're done.
Note: You'll need to escape any quote symbols in the text that match the openning and closeing quotes.
This is a part of the language, so it works across all major browsers.
Here's a simple example:
<!doctype html>
<html>
<style type="text/css">
p {width:50%}
</style>
<head>
<title>back-slash line continuation example</title>
</head>
<body>
<div id="testdiv"></div>
<script type="text/javascript">
/* example long string and html fragmant */
var aLongSrting = '<p>\
This is one of those - it\'s well know by a lot of people, but not every one knows it - type of entries.\
</p><p>\
You can use a back-slash to contiue a quoted line in your javascript.\
</p><p>\
Your scripted html and text fragments are easier to read and modify when you use the back-slash as a \
line continuation marker.\
</p><p>\
No extra quotes are required when using this method, just append a trailing back-slash to each line, except for the last, and you\'re done.\
<p></p>\
Note: You\'ll need to escape any quote symbols in the text that match the openning and closeing quotes.\
</p>';
var anHtmlfragment = '<div class="wraper-a542">\
<form action="">\
<fieldset>\
<legend>User Info</legend>\
<div><label for="inname">Name:</label><input id="inname" name="inname" type="text" size="24" /></div>\
<div><label for="inemail">E-mail:</label><input id="inemail" name="inemail" type="text" size="24" /></div>\
<div><label for="indob">Date of birth:</label><input id="indob" name="indob" type="text" size="24" /></div>\
</fieldset>\
<input id="submitbtn" type="submit" value="Submit Info" />\
</form>\
</div>\
<style type="text/css">/* placed style at end to make sure elements are avilable. back-slash goes after the comment. */\
.wraper-a542 {width:320px;}\
.wraper-a542 fieldset {position:relative;padding-bottom:10px;border:solid 1px #000;margin-bottom:5px;}\
.wraper-a542 div {margin-bottom:3px;}\
.wraper-a542 input {border:solid 1px #000;}\
.wraper-a542 label {display:block;float:left;width:120px;padding-left:3px;margin-left:3px;}\
#submitbtn {display:block;margin-left:2px;}\
</style>';
document.getElementById("testdiv").innerHTML = aLongSrting + anHtmlfragment;
</script>
</body>
</html>
In javascript you can use a back-slash to contiue a quoted line.
Your scripted html and text fragments are easier to read and modify when you use the back-slash as a line continuation marker.
No extra quotes are required when using this method, just append a trailing back-slash to each line, except for the last, and you're done.
Note: You'll need to escape any quote symbols in the text that match the openning and closeing quotes.
This is a part of the language, so it works across all major browsers.
Here's a simple example:
<!doctype html>
<html>
<style type="text/css">
p {width:50%}
</style>
<head>
<title>back-slash line continuation example</title>
</head>
<body>
<div id="testdiv"></div>
<script type="text/javascript">
/* example long string and html fragmant */
var aLongSrting = '<p>\
This is one of those - it\'s well know by a lot of people, but not every one knows it - type of entries.\
</p><p>\
You can use a back-slash to contiue a quoted line in your javascript.\
</p><p>\
Your scripted html and text fragments are easier to read and modify when you use the back-slash as a \
line continuation marker.\
</p><p>\
No extra quotes are required when using this method, just append a trailing back-slash to each line, except for the last, and you\'re done.\
<p></p>\
Note: You\'ll need to escape any quote symbols in the text that match the openning and closeing quotes.\
</p>';
var anHtmlfragment = '<div class="wraper-a542">\
<form action="">\
<fieldset>\
<legend>User Info</legend>\
<div><label for="inname">Name:</label><input id="inname" name="inname" type="text" size="24" /></div>\
<div><label for="inemail">E-mail:</label><input id="inemail" name="inemail" type="text" size="24" /></div>\
<div><label for="indob">Date of birth:</label><input id="indob" name="indob" type="text" size="24" /></div>\
</fieldset>\
<input id="submitbtn" type="submit" value="Submit Info" />\
</form>\
</div>\
<style type="text/css">/* placed style at end to make sure elements are avilable. back-slash goes after the comment. */\
.wraper-a542 {width:320px;}\
.wraper-a542 fieldset {position:relative;padding-bottom:10px;border:solid 1px #000;margin-bottom:5px;}\
.wraper-a542 div {margin-bottom:3px;}\
.wraper-a542 input {border:solid 1px #000;}\
.wraper-a542 label {display:block;float:left;width:120px;padding-left:3px;margin-left:3px;}\
#submitbtn {display:block;margin-left:2px;}\
</style>';
document.getElementById("testdiv").innerHTML = aLongSrting + anHtmlfragment;
</script>
</body>
</html>