How to append huge amounts of html code via jQuery?

Question

I am struggling to append huge amounts of html code. I found this answer How To Append (Or Other Method) a Lot of HTML Code? which I followed but I am getting an illegal argument error. Can anyone suggest a better way to manage this?

CODEPEN DEMO

JS

$(function() {
  $("a").click(function() {
    $("body").append(codeBlock);
  });
});

var codeBlock = $("<div class='code-block'>\
    <div class='select-event'>\
        <label>Start</label>\
        <select>\
            <option>when the Run button is pressed</option>\
            <option>when the object is pressed</option>\
            <option data-option='keyoption'>when a keyboard key is pressed</option>\
        </select>\
        <span class='key-press-wrapper'>\
            <label>Key</label>\
            <input id='keyPress' placeholder='Press Key'>\
        </span>\
    </div>\
    <div class='insert-block'>\
        <label>Insert code blocks here</label>\
        <ul id='sortable' class='connectedSortable'></ul>\
    </div>\
</div>\");

You don't need quotes around 'codeBlock'. `$('body').append(codeblock)` — Bic, Feb 18 '14 at 19:11

score 3 · Accepted Answer · answered Feb 18 '14 at 19:16

3

I am getting an illegal argument error.
</div>\");

That's an odd error, probably it should be "not a valid string literal" or some kind of that. You're escaping the ending string delimiter, which you shouldn't. Remove the backslash in the last line.

answered Feb 18 '14 at 19:16

Bergi

630,263
148
957
1,375

score 2 · Answer 2 · answered Feb 18 '14 at 19:16

2

Remove last slash at </div>\")

answered Feb 18 '14 at 19:16

Chris

3,405
4
29
34

score 2 · Answer 3 · answered Feb 18 '14 at 19:28

2

Using a template engine is definitely the best solution.

e.g. https://github.com/janl/mustache.js

answered Feb 18 '14 at 19:28

charlee

1,309
1
11
22

This could be a useful plugin to use on future projects. Good find – 2ne Feb 18 '14 at 22:22

How to append huge amounts of html code via jQuery?

3 Answers3