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 = '<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);



});

It doesn't seem to be working and after looking at the documentation for append(), I can't figure out why - any ideas? Is it the large amount of HTML that I am trying to append?

Solution 1

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);​

Solution 2

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>';

Solution 3

You could create a template in HTML that is hidden, then append its content HTML. For example:

<div class="hide" id="template">
  <b>Some HTML</b>
</div>

jQuery:

$("#container").append($("#template").html());

Putting HTML in a JavaScript string is harder to read and search for, is error prone and your IDE will struggle to format it properly.

---

Update 2019

Check out the template tag, which was created for this purpose: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

The template tag is even allowed to contain what would be invalid HTML elsewhere, e.g. a td tag outside a table.

Solution 4

You can use a backslash at the end of each line.

http://davidwalsh.name/multiline-javascript-strings

var multiStr = "This is the first line \
This is the second line \
This is more...";

Solution 5

It's my understanding that if you want to put your long string on multiple lines that it's more efficient to use an array of strings and join them.

var bigString = [
    'some long text here',
    'more long text here',
    '...'
];
$('#accordion_container').append(bigString.join(''));

View more solutions