如何使用 jQuery 在代码标签中添加 pre 标签？答案

【问题标题】：How do I add a pre tag inside a code tag with jQuery?如何使用 jQuery 在代码标签中添加 pre 标签？
【发布时间】：2010-09-05 23:34:17
【问题描述】：

我正在尝试使用jQuery 来格式化代码块，特别是在<code> 标签内添加<pre> 标签：

$(document).ready(function() {
   $("code").wrapInner("<pre></pre>");
});

Firefox 正确应用格式，但 IE 将整个代码块放在一行。如果我添加警报

alert($("code").html());

我看到IE在pre标签中插入了一些额外的文字：

<PRE jQuery1218834632572="null">

如果我重新加载页面，jQuery 后面的数字会改变。

如果我使用wrap() 而不是wrapInner() 将<pre> 包装在<code> 标记之外，IE 和Firefox 都可以正确处理它。但是<pre> 不应该在内部 <code> 工作吗？

我更喜欢使用wrapInner()，因为我可以在<pre>标签中添加一个CSS类来处理所有格式，但如果我使用wrap()，我必须将页面格式CSS放在@987654336中@标签和<code>标签中的文本/字体格式，或者Firefox和IE都窒息。没什么大不了的，但我想让它尽可能简单。

有没有其他人遇到过这种情况？我错过了什么吗？

【问题讨论】：

标签： javascript jquery html internet-explorer

【解决方案1】：

你可以使用 html() 来包装它：

$('code').each(function(i,e)
{
    var self = $(e);
    self.html('<pre>' + self.html() + '</pre>');
});

如上所述，您最好更改您的 html。但是这个解决方案应该可以工作。

【讨论】：

【解决方案2】：

正如 markpasc 所说，在 HTML 中不允许在 CODE 元素中使用 PRE 元素。最好的解决方案是将您的 HTML 代码更改为直接在您的 HTML 代码块中使用

（这意味着包含代码的预格式化块）。

【讨论】：

【解决方案3】：

这就是block and inline 元素之间的区别。 pre is a block level element。将其放在code 标签内是不合法的，即can only contain inline content。

因为浏览器必须支持他们可能在真实网络上找到的任何可怕的标签汤，Firefox 试图按照你的意思去做。 IE 碰巧以不同的方式处理它，这在规范中很好；这种情况下的行为是未指定的，因为它永远不会发生。

您能否替换 code 元素为pre？（由于块/内联问题，从技术上讲，这仅在元素位于 an element with "flow" content 内时才有效，但无论如何浏览器可能会执行您想要的操作。）
如果你想要 pre 的行为，为什么它首先是 code 元素？
您还可以使用 CSS white-space: pre 赋予 code 元素 pre 的空白保留功能，但显然是 IE 6 only honors that in Strict Mode。

【讨论】：

代码标签的使用可以被原谅，因为它更符合语义 - 并不是说它是正确的。

【解决方案4】：

顺便说一句，我不知道它是否相关，但代码标签内的前置标签在严格模式下不会验证。

【讨论】：

【解决方案5】：

您使用的是最新的 jQuery 吗？如果你试试呢

$("code").wrapInner(document.createElement("pre"));

是更好还是得到相同的结果？

【讨论】：