iframe作为pre元素的嵌套元素

Question

我正在尝试使用prism突出显示将使用javascript / jquery插入的iframe的语法。结构看起来像：

<pre> <code id="iframeWrapper" class="language-markup"> <!-- IFRAME GOES HERE --> </code> </pre>

在code元素中我想要注入一个iframe - 我该怎么做？我已经尝试设置innerHtml的{​​{1}}但是没有用。我还尝试将iframeWrapper添加为iframe childElement，这也是行不通的。

代码看起来像......

iframeWrapper

<pre><code id="iframe" class="language-markup"></code></pre>

}

Answer 1

使用

$('#iframeWrapper').html(yourIframeHtmlCode);

示例：

$('#clickMe').click(function(){
  $('#iFrameWrapper').html('<iframe src="http://example.com" width="800px" height="800px"></iframe>');
});
                    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='iFrameWrapper'></div>
<button id='clickMe'>Show iframe</button>

Answer 2

可以使用text()代替html()进行设置：

$('#iframeWrapper').text('<iframe src="http://example.com" width="800px" height="800px"></iframe>');

的 DEMO