title: jQuery, editing inline style tag
body: <p>I'm having a problem with some css+javascript. You see, I'm trying to make some sort of a wysiwyg webpage style editor in which there is an iframe which load a webpage containing code of something like this.</p>
  
  <pre><code>&lt;head&gt;
  &lt;style id=mystyle&gt;
    /* something is here */
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Other, quite a lot autogenerated stuff along with javascript that add some interactivity.&lt;/h1&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now, I need to modify the content of #mystyle so that it reflect to the page in realtime. Using jquery, I tried to do so using several technique, like:</p>
  
  <ol>
  <li><code>$(#mystyle).html(newcss);</code></li>
  <li><code>$(#mystyle).replaceWith("&lt;style id='mystyle'&gt;"+newcss+"&lt;/style&gt;")</code></li>
  <li><code>$(#mystyle).after("the newcss along with style tag")</code>, then delete the old one.</li>
  <li><code>$(#mystyle).delete()</code> //just to see what happen.</li>
  </ol>
  
  <p>All of the above fail to change the look of the webpage. In fact, deleting the tag (4.), did not turn the page ugly and I did check using "Inspect Element", the html does change but the appearance do not. So.... what did I do wrong? </p>