CODEWITHSUNDEEP
javascripthtmldomsvg
musically_ut
musically_ut

Reputation: 34288

How to determine at runtime whether a tag is valid inside a DOM element?

I am working on a JS plugin (Just Show Me The Colors) which walks a DOM tree (which is not under my control) and replaces certain TextNodes with a span.

There are certain contexts when this will result in invalid markup, like inside svg:text node. However, this code doesn't throw any errors in Chrome/FF:

var text = document.createElementNS("http://www.w3.org/2000/svg", "svg:text");
text.appendChild(document.craeteElement("span"));

even though it is invalid markup.

Similarly, putting a div inside a p is allowed but works (TM).

However, putting a span inside a script tag is also allowed but does not work.

Is there a way I can determine at runtime whether the markup I am generating is valid or will work or not?

Upvotes: 1

Views: 71

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201658

You can do this only by using a list (well, array) of element names that are allowed inside a given element, according to the definition that you wish to adhere to. Browsers have no understanding of such issues. There are several different definitions for HTML, and they have different content models for elements.

Whether things “work” is a different issue. You should specify a much more concrete question, including a description of what you expect or wish to happen; “works” is not a description.

In particular, note that span is not valid inside script, and no script element created by normal HTML (or XHTML) parsing contains any span element (or any other element for that matter). If you create a script containing a span, the consequences depend on what the browser does with script elements, i.e. how they find the content that they will then parse and interpret as script code.

Upvotes: 1

Denys Séguret
Denys Séguret

Reputation: 382177

The simplest solution might be to keep a list of elements which can validly contain a span.

Here's a list : http://w3-video.com/Web_Technologies/HTML5/span/html5_span_tag_nested.php

Upvotes: 1

Related Questions