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('<div class="content"><div class="left"></div><div class="right"></div></div>');

Javascript syntax

 var str = ' <div class="content"> \
<div class="left"> \
</div> \
<div class="right"> \
</div> \
</div> ';

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

Jquery syntax

 $(element).append(' \
  <div class="content"> \
    <div class="left"> \
    </div> \
    <div class="right"> \
    </div> \
  </div> \
');

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

Answer 2

You can also clone the div with jQuery and then append the clone--way less messy.

var accordionClone = $('.accordion_container').clone();
$('#accordion_container').append(accordionClone);

Answer 3

just add like this $(#element).append(large_html),large_html in special character(``) and thank me later.

Answer 4

Remove the line breaks.

http://jsfiddle.net/DmERt/

var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item" id="accord_item_2"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/><input type="text"/><br/><label>Last Name</label><br/><input type="text" /><br/><label>Home Number</label><br/><input type="text"/><br><label>Work Number</label><br/><input type="text"/><br><label>Cell Number</label><br/><input type="text"/><br></div></div>';

$('#accordion_container').append(large);​

Answer 5

Modern Answer

As ES6 (and beyond) becomes more common, and as more and more people transpile from ES6, we are more and more able to use template literals, which can be used as multiline strings:

var myString = `<p>Line One</p>
<p>Line Two</p>
<p>Line Three</p>`;

---

Original 2012 Answer (ES5)

Javascript does not have multiline strings in the way you are writing them, you can't just open a string on one line, go down a few lines and then close it. (there are some ways of doing multi-line strings in JS, but they are kind of backwards).

How most people do it is something like this:

var myString = '<p>Line One</p>' +
'<p>Line Two</p>' +
'<p>Line Three</p>';