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

By default, the HTML code containing wraps cannot be used with append/prependdirectly use 'or". However currently there are following methods to do that:

1. Use "+" to join HTML code pieces.

2. Use "\" to escape.

3. Use "`" (back-tick, grave accent), do not need any extra operations. This method is supported from ES2015/ES6 (Template literals).

4. Add a hidden tag containing the same HTML code you need, e.g.

   , then use.append($('#foo').html());.

   Now post some use scenarios to the first three methods metioned above (just run them in the console of Chrome browser.):

We can see their differences clearly.