如何通过 jQuery 附加大量的 html 代码？答案

【问题标题】：How to append huge amounts of html code via jQuery?如何通过 jQuery 附加大量的 html 代码？
【发布时间】：2014-02-19 03:28:44
【问题描述】：

我正在努力添加大量的 html 代码。我找到了这个答案How To Append (Or Other Method) a Lot of HTML Code?，但我得到了一个非法参数错误。谁能建议一个更好的方法来管理这个？

CODEPEN DEMO

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

【问题讨论】：

您不需要在“codeBlock”周围加上引号。 $('body').append(codeblock)
已修改，感谢您的快速定位
这不是一个巨大的html。

标签： javascript jquery html

【解决方案1】：

我收到一个非法参数错误。
</div>\");

这是一个奇怪的错误，可能应该是“不是有效的字符串文字”或某种类似的错误。您正在转义结束字符串分隔符，这是您不应该的。去掉最后一行的反斜杠。

【讨论】：

【解决方案2】：

删除</div>\")的最后一个斜杠

【讨论】：

【解决方案3】：

使用模板引擎绝对是最好的解决方案。

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

【讨论】：

这可能是一个有用的插件，可用于未来的项目。很好的发现