如何在同一个 HTML 块中显示预览屏幕和代码屏幕？

Question

你好我正在寻求帮助，因为我被困在一个显然很简单但我无法解决的问题上。

我想在一个div中显示整个网页的渲染（包括doctype、html标签等）。下面我重现了相同的代码，但这样显示它。

因此用户首先会看到视觉渲染，然后一个按钮可以让他看到相应的代码，隐藏渲染块等等。

我在这里复制了这个概念的简化版本：

  var html = $('#code .frame').text();
      $('#preview .frame').html(html);
    
    $('#codeBtn').on('click',function(){
        $('#preview').hide();
        $('#code').show();
      })

#code{
  display:none
}

<button id="codeBtn">grab the code</button>

<div id="preview">
 <div class="frame"></div>
</div>

<div id="code">
  <div class="frame">
    <p>hello world</p>
  </div>
</div>

所以我尝试在一个iframe中，把代码块放了两次，但我得不到满意的结果

感谢任何帮助！