Как проверить содержимое 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>";

Я sh, чтобы проверить правильность этого формата 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