Question

所以我有一个循环将div添加到我的html中的元素。然而，在我附加的div中，我在其中一个div属性中嵌入了一个图标，它似乎引起了一个问题。我不知道如何处理这个的语法。正如您所期望的那样，div在附加时格式不正确，并且它上面印有一些html，显然表明它没有被处理。

虽然如果有人知道如何解决这个问题我会喜欢它，但我也愿意在一个完全不同的庄园中建立div，因为即使不那么复杂，以这种格式构建div似乎总是有麻烦。因此，如果有人对更合适的方法有建议，那就太棒了。

 for (i = 0; i < newGroupsLength; i++) {
    var groupDiv= '<div class="panel panel-default" style="margin-top: 10px; margin-bottom: -4px;">'+
                      '<div class="panel-heading">' +
                         '<h5 class="panel-title">'+
  /*this line is the issue*/   '<input type="checkbox" checked class="switch-demo switch-mini" data-on="success" data-off="danger" data-on-label="<i class="fa fa-check">'+'</i>" data-off-label="<i class="fa fa-remove">'+'</i>" ><a data-toggle="collapse"  data-parent="#accordion" href="#collapseOne">' + newGroups[i].name + '<i class="fa fa-angle-down pull-right">'+'</i>'+'<i class="fa fa-angle-up pull-right">'+'</i>'+'</a>' +
                         '</h5>' +
                      '</div>' +
                      '<div id="collapseOne" class="panel-collapse collapse ">' +
                          '<div class="panel-body">blah blah blah</div>' +
                          '</div>' +
                      '</div>';

     alert(newGroups[i].type);
    $('#groups-container').append(groupDiv);

                            }

衷心感谢任何帮助。非常感谢

Answer 1

当前的问题是在双引号字符串中使用双引号：

'data-on-label="<i class="fa fa-check">'+'</i>" data-off-label="<i class="fa fa-remove">'

您需要转义字符串中的任何"，例如此\"

'data-on-label="<i class=\"fa fa-check\">'+'</i>" data-off-label="<i class=\"fa fa-remove\">'

最好使用基于模板的解决方案。甚至可以将html置于虚拟脚本块中并引用其中的html()（根据需要替换内容）。

在javascript中构建复杂的html div

1 个答案: