1

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.

vikramvi
  • 3,312
  • 10
  • 45
  • 68
  • Almost any string will be valid HTML, as the browser will close tags and display attributes as text if something gets broken. If you really want to check, you could put the string in a hidden div then query it for the presence of the elements/attributes that you expect to be there. – Bryn Lewis Aug 04 '20 at 05:44

1 Answers1

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

JALO - JusAnotherLivngOrganism
  • 1,236
  • 1
  • 13
  • 27
  • Thanks for quick help, is there any online validator similar to CSS validators https://jigsaw.w3.org/css-validator/#validate_by_input, where I can check if HTML if proper or not ? In VS Code, if file type is .html; I can easily find problem but syntax like above it's really difficult – vikramvi Aug 04 '20 at 07:47
  • Most welcome. Not sure if following will help, but if you paste the content of string in these, you should be able to get the pain points: https://jsonformatter.org/html-validator https://www.freeformatter.com/html-validator.html – JALO - JusAnotherLivngOrganism Aug 04 '20 at 09:39