How can I check that content generated by JavaScript is valid HTML? For example, the following document will pass static HTML validation (e.g. validator.nu), will not produce any JavaScript errors, and will render without complaint in a browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>test</title>
<script>
window.onload = function() {
var text = document.createTextNode('nested anchor');
var anchor = document.createElement('a');
var nested_anchor = document.createElement('a');
nested_anchor.appendChild(text);
anchor.appendChild(nested_anchor);
document.getElementsByTagName('body')[0].appendChild(anchor);
};
</script>
</head>
<body>
<p>test</p>
</body>
</html>
However, the output contains an anchor inside another anchor element, which is not valid according to the HTML5 specification. Is there any way to check for these sorts of errors?
You could output the resulting HTML as a String, embed it in a valid document and send it for validation. In your case, using jQuery
var htmlText = $(anchor).html().Or even simpler, output the whole resulting html
console.log($("html").html())