title: Dynamically Add Code to IFrame without Reloading HTML or Javascript
body: <p>Weave: <a href="http://kodeweave.sourceforge.net/editor/#5dbb5ce4a85bcaf4c5805e337c829e73" rel="nofollow noreferrer">http://kodeweave.sourceforge.net/editor/#5dbb5ce4a85bcaf4c5805e337c829e73</a></p>
  
  <p>I have three textareas:</p>
  
  <p>1 for HTML<br>
  1 for CSS<br>
  and 1 for JavaScript code  </p>
  
  <p>Whenever code is added in these textareas (I'm using keyup for the same of this post) I call a function called <code>runEditor</code> which adds the code into the iframe.</p>
  
  <p>What I'm trying to figure out is how can I call the same function when CSS is added without adding the HTML or the JavaScript again?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var htmlEditor = document.querySelector(".html")
  var cssEditor  = document.querySelector(".css")
  var jsEditor   = document.querySelector(".js")
  
  function runEditor() {
    var previewFrame = document.querySelector(".preview")
    var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document
  
    preview.open()
    preview.write("&lt;style&gt;"+ cssEditor.value +"&lt;/style&gt;" + htmlEditor.value + "&lt;scr"+"ipt&gt;"+ jsEditor.value +"&lt;/scr"+"ipt&gt;")
    preview.close()
  }
  runEditor()
  
  htmlEditor.onkeyup = function() {
    runEditor()
  }
  cssEditor.onkeyup = function() {
    runEditor()
  }
  jsEditor.onkeyup = function() {
    runEditor()
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>textarea {
    width: 30%;
    height: 100px;
  }
  
  .preview {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea class="html"&gt;
  &lt;button&gt;
    Hello world
  &lt;/button&gt;
  
  &lt;div class="output"&gt;&lt;/div&gt;
  &lt;/textarea&gt;
  &lt;textarea class="css"&gt;body {
    background: #52b165;
  }&lt;/textarea&gt;
  &lt;textarea class="js"&gt;
  var output  = document.querySelector(".output")
  var btn     = document.querySelector("button")
  var counter = 0
  
  function addElm() {
    var node = document.createElement("div")
    var txt = document.createTextNode("hi " + counter++)
    node.appendChild(txt)
    output.appendChild(node)
  }
  
  btn.addEventListener("click", function() {
    addElm()
  })
  &lt;/textarea&gt;
  &lt;iframe class="preview" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts"&gt;&lt;/iframe&gt;</code></pre>
  </div>
  </div>
  </p>