如何通過jQuery附加大量的html代碼？

Question

我正在努力添加大量的html代碼。 我找到了這個答案如何添加（或其他方法）很多HTML代碼？ 我遵循了，但是卻收到了非法的參數錯誤。 誰能建議一種更好的方法來解決此問題？

CODEPEN演示

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>\");

Answer 1

我收到了非法的參數錯誤。

 </div>\\"); 

那是一個奇怪的錯誤，可能應該是“不是有效的字符串文字”或某種形式的錯誤。 您正在轉義結尾字符串定界符，這是不應該的。 刪除最后一行中的反斜杠。

Answer 2

刪除</div>\\")處的最后一個斜杠</div>\\")

Answer 3

使用模板引擎絕對是最好的解決方案。

例如https://github.com/janl/mustache.js