Validate dynamic HTML generated by JavaScript_问答_开发者

Validate dynamic HTML generated by JavaScript

开发者 https://www.devze.com 2023-04-12 13:17 出处：网络

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, an

相关专题：javascript

<!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);开发者_如何学Go
                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())

A possibility is to use the Validate Local HTML feature of the Web Developer toolbar (Chrome & Firefox). This feature will use the W3 validator to validate the generated HTML.

Instead of downloading an extension, you can also use my JavaScript bookmarklet to validate the local HTML. Create a bookmark, and paste the code below at the "URL" field. Then, whenever you want to validate the local HTML, click at the bookmarklet.
The code below is stand-alone, and doesn't require any framework.

javascript:void(function(){
    var form = document.createElement("form");
    form.method = "POST";
    form.enctype = "multipart/form-data";
    form.action = "http://validator.w3.org/check";
    form.target = "_blank";

    /* Get local HTML*/
    var html = "<html>" + document.documentElement.innerHTML + "</html>";
    var post_data = {
        fragment: html,/*Settings for validator*/
        prefill: "0",
        doctype: "HTML5",
        prefill_doctype: "html401",
        group: "0",
        ss: "1",
        outline: "1"
    };
    for(var name in post_data){
        (function(){
            var t = document.createElement("textarea");
            t.name = name;
            t.value = post_data[name];
            form.appendChild(t)
        })()
    }
    document.body.appendChild(form);
    form.submit(); /* Open validator, in new tab*/
    document.body.removeChild(form);
})()