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

Question

I've below code

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

I wish to validate if this is correct format of HTML as it contains many variable and it's hard to debug if something goes wrong.

Answer 1

To make it one degree less complicated, you can use single quotes to wrap class or style declarations and double quotes to wrap the overall html (or vice versa).

In this piece of html, I observed issued at closing of </h6> and in the class declaration of last anchor tag.

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

You may use following function to validate the html so created:

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

Further I recommend reading: check-if-html-snippet-is-valid