<pre> 标签内的 HTML 代码，innerHTML 不返回所有代码答案

【问题标题】：Html Code inside an <pre> tag, innerHTML doesnt return all the code<pre> 标签内的 HTML 代码，innerHTML 不返回所有代码
【发布时间】：2014-12-05 20:38:21
【问题描述】：

我希望所有代码都包含在 pre-tag 中，但 innerHTML 或 jquery : html() 不会返回所有代码。有些东西被切断了。比如 doctype 和 head body 标签等。

<pre id="pre">
    <!DOCTYPE html>
    <html >
        <head></head>
        <body>    
            <div>asdfds</div>
        </body>    
    </html>
</pre>

当我提醒 #pre 对象的 innerHTML 它只会提醒 div

http://jsfiddle.net/6o8xjtaq/1/

还有其他办法解决这个问题吗？

【问题讨论】：

您的HTML 标记无效。
通过使其有效，它可以工作（显示所有内容）：jsfiddle.net/MelanciaUK/6o8xjtaq/2
@MelanciaUK 我认为 OP 想要在屏幕上显示 HTML 代码。在这种情况下，jsfiddle 不起作用。如果您分别使用 &lt; 和 &gt; 对特殊 HTML 字符进行编码，我相信它会产生所需的输出。

标签： javascript jquery html innerhtml

【解决方案1】：

如果你真的想这样做，请使用脚本

<script id="pre" type="text/template">
<!DOCTYPE html>
<html >
    <head></head>
    <body>    
        <div>asdfds</div>
    </body>    
</html>
</script>

$('#pre').text();

【讨论】：

仅供参考，一旦 IE 加入，您就可以为此使用新的 <template> 元素。 :)

【解决方案2】：

将&lt; 和&gt; 替换为&lt; 和&gt;，这样您就可以根据需要获得它，但不是无效的html。

<pre id="pre">
&lt;!DOCTYPE html&gt;
    &lt;html &gt;
        &lt;head&gt;&lt;/head&gt;
        &lt;body&gt;    
            &lt;div&gt;asdfds&lt;/div&gt;
        &lt;/body&gt;    
    &lt;/html&gt;
</pre>

【讨论】：