如何使用jQuery在代碼標記內添加pre標記？

Question

我正在嘗試使用jQuery格式化代碼塊，特別是在<code>標記內添加<pre> <code>標記：

$(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放在<pre>標簽中， <code>標簽中的文本/字體格式，或Firefox和IE都會阻塞。 這不是什么大不了的事，但我想盡量保持簡單。

有人遇到過這種情況么？ 我錯過了什么嗎？

Answer 1

這是塊和內聯元素之間的區別。 pre是塊級元素 。 將它放在code標記中是不合法的， code標記只能包含內聯內容 。

因為瀏覽器必須支持他們可能在真實網絡上找到的任何神奇的標簽湯，Firefox會嘗試做你的意思。 IE碰巧以不同的方式處理它，這很好的規范; 在這種情況下的行為是未指定的，因為它永遠不會發生。

• 你可以用pre 替換 code元素嗎？ （由於塊/內聯問題，從技術上說，只有當元素位於具有“流”內容的元素內時才能工作，但瀏覽器可能會按照您的意願執行。）
• 如果你想要pre的行為，為什么它首先是一個code元素？
• 您還可以使用CSS white-space: pre給code元素pre的空白保留能力，但顯然IE 6僅在嚴格模式下表示尊重 。

Answer 2

順便說一句我不知道它是否相關，但代碼標簽內的預標簽不會在嚴格模式下驗證。

Answer 3

你在使用最新的jQuery嗎？ 如果你嘗試怎么辦？

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

它會更好還是你得到相同的結果？

Answer 4

正如markpasc所說，HTML中不允許在CODE元素中使用PRE元素。 最好的解決方案是將HTML代碼更改為直接在HTML代碼塊中使用<pre> <code>（這意味着包含代碼的預格式化塊）。

Answer 5

您可以使用html（）來包裝它：

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

如上所述，你最好更改你的HTML。 但這個解決方案應該有效。