jQueryを使用してコードタグ内にプレタグを追加するにはどうすればよいですか？

Question

私は、特に <code>タグ内 <pre>タグを追加するには、書式コードブロックに jQuery使用しようとしている

：

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

Firefoxが正しく書式設定が適用されますが、IEは1行に全体のコードブロックを置きます。私はページをリロードした場合

<PRE jQuery1218834632572="null"> 

、数はjQueryの変更を次：私は警告を追加した場合

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

私はIEがpreタグにいくつかの追加のテキストを挿入していることがわかります。私は<code>タグの外<pre>をラップするために、代わりにwrapInner()のwrap()使用する場合

、IEとFirefoxの両方がそれを正しく扱います。しかし、<pre>は<code>の中でを使うべきではないでしょうか？

私はその後、すべての書式を処理するために<pre>タグにCSSクラスを追加することができますので、wrapInner()使用することを好むだろうが、私はwrap()を使用している場合、私は<pre>タグおよびテキスト/フォントフォーマットでページのフォーマットのCSSを配置する必要があります<code>タグ、またはFirefoxとIEの両方でチョーク。大したことではありませんが、できるだけシンプルにしていきたいと思います。

は、誰がこれを検出しましたか？何か不足していますか？

Answer 1

これはblock and inline要素の違いです。 pre is a block level element。 codeタグの中に入れることは合法ではありません。can only contain inline contentです。

Firefoxは実際のウェブ上で見つかる恐れのあるタグスープをサポートする必要があるため、Firefoxはあなたが意味することを試みます。 IEはそれを別の方法で処理しますが、これは仕様上問題ありません。その場合の行動は決して起こらないはずであるため、これは不特定である。

• あなたの代わりにpreでcode要素を置き換えてもらえますか？ （ブロック/インラインの問題のため、技術的には、要素がan element with "flow" contentの中にある場合にのみ機能するはずですが、ブラウザーは必要なものを実行する可能性があります）
• 最初はcodeの要素ですか、必要な場合はpreの行動？
• また、code要素のpreの空白保持率は、CSS white-space: preでも、明らかにIE 6 only honors that in Strict Modeとなります。

Answer 2

最新のjQueryを使用していますか？あなたは

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

をしようとした場合、それは任意のより良いですかあなたは同じ結果を得るかどう ？

Answer 3

Btw関連性があるかどうかわかりませんが、コードタグ内のpreタグは厳密モードでは検証されません。

Answer 4

マークパースで述べたように、CODE要素内のPRE要素はHTMLでは使用できません。最適な解決策は、コードブロックのHTMLに<>前もって<コード>（コードを含むあらかじめフォーマットされたブロックを意味する）を使用するようにHTMLコードを変更することです。あなたはそれをラップする）（HTMLを使用することができ

Answer 5

：

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

前述したように、あなたはあなたのhtmlを変更したほうが良いと思います。しかし、この解決法はうまくいくはずです。