Appending large block of html with append()

Question

Im trying to append a large block of text using jquery\'s append().

$(\'#add_contact_btn\').click(function(event) {
    event.preventDefault();

    var large =         


        

Answer 1

Javascript have the option to extend multiple lines/HTML section into a single line, for each line of HTML row add backslash() to identify that its continue line.

Note :-The only thing to consider while append lines are the single quote and double quote. If you start with the single quote, then use double quote in the internal string or vice-versa, otherwise, line is break and do not get the proper result.

$(element).append('
');

Javascript syntax

 var str = ' 
 \
 \
 \
 \
 \
 ';

 document.getElementsByName(str).html(str);
 //or
 document.getElementsById(str).html(str);

Jquery syntax

 $(element).append(' \
  
 \
    
 \
    
 \
    
 \
    
 \
  
 \
');

Or you can use a html template for this as mention in 3rd link via jquery

$("#div").load("/html_template.html");

http://www.no-margin-for-errors.com/blog/2010/06/17/javascript-tip-of-the-day-extending-a-string-across-multiple-lines/

Appending multiple html elements using Jquery

spread html in multiple lines javascript