如何使用放在字符串中的多个变量来验证 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 中，我观察到在</h6> 结束时和最后一个锚标记的类声明中发出。

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;
}

我进一步推荐阅读： check-if-html-snippet-is-valid