title: How to determine at runtime whether a tag is valid inside a DOM element?
body: <p>I am working on a JS plugin (<a href="http://musically-ut.github.io/just-show-me-the-colors/" rel="nofollow">Just Show Me The Colors</a>) which walks a DOM tree (which is not under my control) and replaces certain <code>TextNodes</code> with a <code>span</code>. </p>
  
  <p>There are certain contexts when this will result in invalid markup, like inside <code>svg:text</code> node. However, this code doesn't throw any errors in Chrome/FF:</p>
  
  <pre><code>var text = document.createElementNS("http://www.w3.org/2000/svg", "svg:text");
  text.appendChild(document.craeteElement("span"));
  </code></pre>
  
  <p>even though it is invalid markup.</p>
  
  <p>Similarly, putting a <code>div</code> inside a <code>p</code> is allowed but <em>works</em> (TM).</p>
  
  <p>However, putting a <code>span</code> inside a <code>script</code> tag is also allowed but does not <em>work</em>.</p>
  
  <p>Is there a way I can determine at runtime whether the markup I am generating is valid or will <em>work</em> or not?</p>