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

我試圖用jQuery格式化代碼塊，特別添加<code>標籤內<pre>標籤：如何使用jQuery在代碼標記內添加預標記？

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

Firefox的正確應用的格式，但IE瀏覽器把整個代碼塊在一行。如果我添加警報

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

我看到IE瀏覽器已經插入一些額外的文本前標籤：

<PRE jQuery1218834632572="null">

如果我重新載入頁面，下面的jQuery的更換次數。

如果我使用wrap()而不是wrapInner()，包裹<pre>的<code>標籤外，IE和Firefox都能夠正確處理它。但是不應該<pre>工作裏面<code>以及？

我寧願使用wrapInner()，因爲我可以再添加一個CSS類爲<pre>標籤來處理所有格式，但如果我用wrap()，我必須把頁面格式化CSS在<pre>標籤和文本/字體格式在<code>標籤中，或Firefox和IE都窒息。沒有什麼大不了的，但我希望儘可能簡單。

有沒有其他人遇到過這個？我錯過了什麼嗎？

這就是block and inline元素之間的差異。 pre is a block level element。將它放在code標記內，這是不合法的，其中can only contain inline content。

因爲瀏覽器必須支持他們可能在真實網絡上找到的任何標籤湯，Firefox會嘗試去做你的意思。 IE碰巧處理它不同，這是規範罰款;在這種情況下的行爲沒有具體說明，因爲它永遠不會發生。

你能代替更換的code元素與pre？
爲什麼在首位code元素，如果你想pre（由於塊/內聯問題，在技術上如果元素都在裏面an element with "flow" content應該只有工作，但瀏覽器可以做你想做的反正。的）的行爲？
您也可以通過CSS white-space: pre給出code元素pre的空白保留能力，但顯然IE 6 only honors that in Strict Mode。

2008-08-16 04:04:09 markpasc

代碼標籤的使用可以被理解爲更多的語義 - 而不是它使它正確。 – nickf 2008-09-23 06:40:06

您是否使用最新的jQuery？如果你嘗試

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

是不是更好或者你得到同樣的結果？

2008-08-15 21:50:14 Pat

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

2008-08-15 21:56:18 Pat

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

2008-08-18 12:13:36

你可以使用HTML（）把它包起來：

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

正如上面提到的，你會更好，改變你的HTML。但是這個解決方案應該可行

2011-08-18 14:21:51

回答