title: How should I handle this? Code not validating: Noscript to compensate for lack of JS, but also accommodations to mobile users
body: <p>Okay, so I have a paragraph tag which has some text, and the text refers to the direction in which the user can look to view the navigation (I know it's unnecessary, but whatever). Now, I'm trying to kill 2 birds with 1 stone by changing this value from essentially "left" to "top" with javascript (navigation is usually on the left, while on the iphone, for example, it's above); but the efficiency comes in when I try to use noscript.</p>
  
  <p>example:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    if(navigator.userAgent.indexOf('iPhone') &gt; -1){
      document.getElementByClassName('navdir')[0].innerHTML = 'up';
    }
  &lt;/script&gt;
  
  -------------
  
  &lt;p&gt;
     look &lt;span class="navdir"&gt;left&lt;noscript&gt;&lt;span&gt; (or up, for mobile)&lt;/span&gt;&lt;/noscript&gt;&lt;/span&gt;
     for the navigation section!
  &lt;/p&gt;
  </code></pre>
  
  <p>The cool thing is, innerHTML erases the children nodes of span.navdir which is the noscript tag (and it's contents)! My sentence becomes friendly to people who lack javascript, as well as people using the iphone, or both!</p>
  
  <p>I was all happy and stuff until I found that it did not validate. I google'd this up and it's regarding the fact that noscript is actually a block tag, and cannot be inside p, or span, etc.</p>
  
  <p>How can I make this validate while still keeping my new-founded efficiency?</p>