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

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

  Some HTML

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.