javascript - 是否可以在 JS 中构造 HTML 以便不使用 document.write 插入 HTML 中？

Question

我正在构建一个通过 JS/JSON 插入 HTML 的 Web 应用程序。我喜欢使用空格来分解内容，以便在 JS 中更轻松地浏览代码。

我有这个:

HTML

<div class="row">   
    <div class="col-lg-12" id="placeholder">

    </div>

JS

$(passOptions.options).each(function() {
        var output = "<table id='placeholder2' class='table table-bordered'><tbody><tr><td><span class='primary-line'>Annual Power Pass</span><br /><span class='secondary-line'><a href='#'>Blockout Dates Apply</a></span></td>" + 
                                "<td id='powerAP'>" + this.premiere + "<br />" + this.preferred 
                                + "</td></tr></tbody></table>";
        $('#pricing').append(output);
    });

之前的JS是这样的:

$(passOptions.options).each(function() {
    var output = "
              <table id='placeholder2' class='table table-bordered'>
                  <tbody>
                      <tr>
                         <td>
                            <span class='primary-line'>Annual Power Pass</span><br /><span class='secondary-line'><a href='#'>Blockout Dates Apply</a></span>
                         </td>" + 
                                "<td id='powerAP'>" + this.premiere + "<br />" + this.preferred 
                              + "</td>
                      </tr>
                   </tbody>
                </table>";
    $('#pricing').append(output);
});

但是带有结构化 HTML 的 JS 版本无法正常工作，而且我还收到了“Uncaught SyntaxError: Unexpected token ILLEGAL”错误。

所以我恢复到“缩小”版本，因为它工作正常。

是否有另一种方法可以使 HTML 更容易在 JS 中查看/导航？

顺便说一句，这将位于 Sharepoint 中，用户将能够更新应用程序的某些部分。

如果您没有注意到，我正在使用 Bootstrap 3 构建它。

提前致谢。

Answer 1

如果您继续将未转义的数据连接到标记中，则可能会创建无效的 HTML 并使自己面临一些 XSS 攻击，同时使您的代码无法维护。

您需要的是一个 JavaScript 模板引擎。有很多可供选择。我更喜欢Swig 。很多人喜欢Mustache .

Swig 文档中的示例:

{% block tacos %}
  //...
{% endblock tacos %}
{% block burritos %}
  {% if foo %}
    // ...
  {% endif the above will render if foo == true %}
{% endblock burritos %}

另请参阅:http://paularmstrong.github.io/swig/docs/api/#run