title: How to open a new window and write html
body: <p>The goal of this question is to figure out how to open a new tab. Then render a string of html in the tab.</p>
  <p>Expected:
  A new window should open. Then the html from the variable generated_html should be displayed in the new window.</p>
  <p>Actual:
  A new window opens. The string of html is not rendered properly.
  <a href="https://i.stack.imgur.com/NrNXm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NrNXm.png" alt="enter image description here" /></a></p>
  <p>I have created a function that opens the window and processes the string of html.</p>
  <pre><code>function render_html(){
        // was html rendered?
        if(!htmlRendered){
          textarea  = document.getElementById(&quot;generated_html_textarea&quot;);
          generated_html = textarea.value;
          console.log(generated_html);
          maincontentstyle = document.getElementById(&quot;maincontentstyle&quot;);
          rendered_html = document.createElement(&quot;div&quot;);
          rendered_html.setAttribute(&quot;id&quot;,&quot;rendered_html&quot;);
          rendered_html.setAttribute(&quot;style&quot;,&quot;border: 1px solid #EB0D1B; width: 360px; font-family: courier; font-size: 100.5%; margin: 0px auto; border: 1px; text-align: center; margin-top: 5px;&quot;);
          rendered_html.innerHTML +=  generated_html;
          rendered_html.innerHTML +='&lt;span style=&quot;padding: 3px&quot;&gt; &lt;button id =&quot;one&quot; class=&quot;button&quot; type=&quot;button&quot; onClick=&quot;show_answer()&quot;&gt;Show Answer&lt;/button&gt; &lt;button id = &quot;resetButton&quot; class=&quot;button&quot; type=&quot;button&quot; onClick=&quot;reset()&quot;&gt;Reset&lt;/button&gt; &lt;/span&gt;';
          maincontentstyle.appendChild(rendered_html);
          htmlRendered = true;
          var new_window = window.open('');
          console.log(rendered_html);
          new_window.document.write(rendered_html);
        }
        update_jq_ui();
      }
  </code></pre>
  <p>The console log prints out</p>
  <pre><code>&lt;div id=&quot;maincontentstyle&quot;&gt;
      &lt;center&gt;
          &lt;div id=&quot;boxstyle&quot;&gt;
              &lt;h3 id=&quot;h3style&quot;&gt;T&lt;/h3&gt;
                  &lt;center&gt;
                      &lt;div class=&quot;source&quot;&gt;
                          &lt;div id=&quot;s1&quot; class=&quot;draggyBox-small ui-draggable&quot;&gt;
                              k1
                          &lt;/div&gt;
                          &lt;div id=&quot;s2&quot; class=&quot;draggyBox-small ui-draggable&quot;&gt;
                              k2
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/center&gt;
                      &lt;table id=&quot;tablestyle&quot;&gt;
                          &lt;tr&gt;
                          &lt;td id=&quot;row1&quot;&gt;
                              &lt;div id=&quot;t1&quot; class=&quot;ltarget&quot;&gt;&lt;/div&gt;
                          &lt;/td &gt;
                          &lt;td id=&quot;d1&quot;&gt;
                              d1
                              &lt;/td &gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                          &lt;td id=&quot;row2&quot;&gt;
                              &lt;div id=&quot;t2&quot; class=&quot;ltarget&quot;&gt;&lt;/div&gt;
                          &lt;/td &gt;
                          &lt;td id=&quot;d2&quot;&gt;
                              d2
                              &lt;/td &gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/center&gt;
          &lt;/div&gt;
      &lt;/center&gt;
  &lt;/div&gt;
  </code></pre>