JSML: JSON that represents HTML

Input JSML

{div: {$: [
                {p: {
                    class: "myClass myClass2",
                    style: "margin: .5em 0; padding: 0.5em;",
                    $: [
                        "JSML means ",
                        {a: {
                            href: "https://www.json.org/",
                            text: "JSON"
                        }},
                        " that represents ",
                        {em: "HTML"}
                    ]
                }},
                {button: {
                    type: "button",
                    class: ["btn", "btn-primary"],
                    className: "small d-inline-block",
                    css: "border-radius: 50%; color: black;",
                    style: {
                        marginTop: "1em",
                        paddingBottom: "1px"
                    },
                    data: {
                        camelCase: "uwu",
                        "kebab-case": "wow"
                    },
                    "data-foo-bar": "2000",
                    onClick: "console.log('by string', onclick, event.target)",
                    listeners: {
                        click: function() {console.log("by function", this);}
                    },
                    text: "Hohoho"
                }}
            ]}}

Element created

outerHTML

C

toHTML()

D