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版本没有工作，我也得到了一个＆＃34; Uncaught SyntaxError：Unexpected token ILLEGAL＆＃34;错误。

所以我又回到了＃34;缩小了＃34;版本，因为它工作正常。

还有另一种方法可以在HTML中更容易查看/导航HTML吗？

顺便说一下，这将存在于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

Answer 2

我已经使用过这样的东西......我更容易阅读...

var output = [
  "<table>",
    "<tr>",
      "<td>",
      "Content Here"
      "</td>",
    "</tr>",
  "</table>"
  ].join("\n");

output 现在是一个根据表格构建的字符串，并在添加到代码时使用\n连接到换行符。

Answer 3

是啊javascript不喜欢那些空行。如果你想格式化你的HTML，你可以用以下两种方式之一：
1 - 反斜杠每个html行的结尾

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

或2 - 连接输出：

var output = "<table id='placeholder2' class='table table-bordered'>";
output +=    "<tbody>";
output +="<tr>";
output +="<td>";
output+="<span class='primary-line'>Annual Power Pass</span><br /><span class='secondary-line'><a href='#'>Blockout Dates Apply</a></span>";
                         ....etc

Answer 4

你可以使用style =“display：none;”

将html作为html元素

为你的htmlElement提供一个id。

var elem = $('#htmlElemId').clone().removeAttr('id');
elem.find('#powerAP').text(this.premiere); //Its advised not to use ids in your template. Use class instead
$('#pricing').append(elem);

是否可以在JS中构建HTML以使用document.write插入到HTML中？

4 个答案: