如何使用字符串中的多个变量验证HTML内容

Question

我有下面的代码

issuesList.innerHTML += "<div class=\"well\">" +
        "<h6> Issue Id:" + id + "</h6" +
        "<p><span class=\"label label-info\">" + status + "</span></p>" +
        "<h3>" + desc + "</h3>" +
        "<p><span class=\"glyphicon glyphicon-time\">" + severity + "</span></p>" +
        "<p><span class=\"glyphicon glyphicon-user\">" + assignedTo + "</span></p>" +
        "<a href=\"#\"  onclick= \"setStatusClosed(\"" + id + "\")\"   class=\"btn btn-warning\">Close</a>" +
        "<a href=\"#\ onclick=\"deleteIssue( \"" + id + "\")\"  class=\"btn btn-danger\>Delete</a>" +
        "</div>";

我希望验证这是否是HTML的正确格式，因为它包含许多变量，如果出现问题，很难进行调试。

Answer 1

为了使它不那么复杂，您可以使用单引号来包装类或样式声明，使用双引号来包装整个html（反之亦然）。

在这段html中，我观察到在<代码>

issuesList.innerHTML += "<div class='well'>" +
        "<h6> Issue Id:" + id + "</h6>" +
        "<p><span class='label label-info'>" + status + "</span></p>" +
        "<h3>" + desc + "</h3>" +
        "<p><span class='glyphicon glyphicon-time'>" + severity + "</span></p>" +
        "<p><span class='glyphicon glyphicon-user'>" + assignedTo + "</span></p>" +
        "<a href='#'  onclick= 'setStatusClosed(\"" + id + "\")'   class='btn btn-warning'>Close</a>" +
        "<a href='#' onclick='deleteIssue( \"" + id + "\")'  class='btn btn-danger'>Delete</a>" +
        "</div>";

您可以使用以下函数验证这样创建的html：

function validator(createdhtml) {
    var tempdiv = document.createElement('div');
    tempdiv.innerHTML = createdhtml;
    return tempdiv.innerHTML;
}

此外，我建议阅读：检查html代码段是否有效