How to check if an element is a valid child/parent for another element

Question

Is there any way in JavaScript to check if a HTML element is a valid child of another element?

For example:

Can an unordered list (<ul>) accept a list item (<li>) as a valid child element? - Yes

Can an unordered list (<ul>) accept an unordered list (<ul>) as a valid child element? - No

Or is there any way to get a list of valid HTML children elements of a specific element?

For example:

Which elements are allowed to be children of a table row (<tr>)?
Answer: TD, TH

Which elements are allowed to be children of a span?
Answer: A, ABBR, ... (ALL)

Tags and elements aren't the same thing. Please don't use them interchangeably. — BoltClock
– BoltClock, Commented Feb 28, 2013 at 11:39
I don't know how to modify my question to match your observation. — SYNCRo
– SYNCRo, Commented Feb 28, 2013 at 11:41
i dont know if there is an easy solution but a solution could be to take the HTML DTD and store it in a JS Object, with for each key a tag and value is an array of permitted child tag — atrepp
– atrepp, Commented Feb 28, 2013 at 20:41
Very similar to Is there a pure Javascript X/HTML validator? — rds
– rds, Commented Feb 28, 2013 at 20:45
@animuson, you're so kind... thanks for your time spended editing my post! — SYNCRo
– SYNCRo, Commented Feb 28, 2013 at 21:13

vinczemarton · Accepted Answer · 2013-02-28 20:45:50Z

You can try creating the HTML in question and then validating it by this jQuery library:

https://github.com/peterjwest/html_validator

The demo.js is a good starting point:

$(document).ready(function() { var html = [ "<title></title>", "<table><tbody></tbody><col></table>", "<tag><img apple=\"no\" banana='yes'></img></tag>", "<form action=''>", " <fish></fish>", " <fieldset>", " <img>", " <legend></legend>", " <legend></legend>", " <input>", " <!--</html><!-- :D -->", " </fieldset>", "</form>", "<table>", " <col>", " <tr>", " <td>", " </tbody>", "</table>", "<del><p>hallo</p></del>", "</body>", "<img>", "<img>", "<p><a></a></p>", "<form><fieldset><input type checked disabled='blah'></fieldset></form>", "</html>" ].join("\n"); $.htmlValidator.doctypes; $.htmlValidator.doctype("HTML 4.01 Strict"); $.htmlValidator.parseSettings(); $.htmlValidator.parseSettings({}); $.htmlValidator.parseSettings({url: ""}); $.htmlValidator.parseSettings({html: html}); $.htmlValidator.parseSettings({fragment: $("div")}); $.htmlValidator.parse({doctype: "HTML 4.01 Frameset", html: html}); console.log($.htmlValidator.parse({doctype: "HTML 4.01 Transitional", html: html}).call($.htmlValidator.fn.draw)); console.log($.htmlValidator.validate({doctype: "HTML 4.01 Transitional", html: html})); //$.htmlValidator.parse({doctype: "HTML 4.01 Transitional"}); //Parses current page by AJAX with GET //$.htmlValidator.parse({doctype: "HTML 4.01 Transitional", type: 'post', data: {foo: 'bar'}); //Default loads current page by AJAX with POST //$.htmlValidator.parse({doctype: validator.doctype("HTML 4.01 Transitional"), html: html}); //$.htmlValidator.validate(); //$.htmlValidator.validate({fragment: $("#section").html()}); //$.htmlValidator.validate({url: "/foo/bar"}); //$.htmlValidator.validate({formatted: true}); //$.htmlValidator.validate({formatted: false}); });

As you can see you can validate a fragment of the supplied page which is basically what you need.

As for checking the possible child elements I don't know if there is a good solution implemented.

Collectives™ on Stack Overflow

How to check if an element is a valid child/parent for another element

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related