<p>I'm trying to use <code>jQuery</code> to format code blocks, specifically to add a <code>&lt;pre&gt;</code> tag inside the <code>&lt;code&gt;</code> tag:</p>

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

<p>Firefox applies the formatting correctly, but IE puts the entire code block on one line. If I add an alert  </p>

<pre><code>alert($("code").html());
</code></pre>

<p>I see that IE has inserted some additional text into the pre tag:</p>

<pre><code>&lt;PRE jQuery1218834632572="null"&gt;
</code></pre>

<p>If I reload the page, the number following jQuery changes.</p>

<p>If I use <code>wrap()</code> instead of <code>wrapInner()</code>, to wrap the <code>&lt;pre&gt;</code> outside the <code>&lt;code&gt;</code> tag, both IE and Firefox handle it correctly. But shouldn't <code>&lt;pre&gt;</code> work <em>inside</em> <code>&lt;code&gt;</code> as well?</p>

<p>I'd prefer to use <code>wrapInner()</code> because I can then add a CSS class to the <code>&lt;pre&gt;</code> tag to handle all formatting, but if I use <code>wrap()</code>, I have to put page formatting CSS in the <code>&lt;pre&gt;</code> tag and text/font formatting in the <code>&lt;code&gt;</code> tag, or Firefox and IE both choke. Not a huge deal, but I'd like to keep it as simple as possible.</p>

<p>Has anyone else encountered this? Am I missing something?</p>

[{'answer_id': 12804, 'author': 'Pat', 'author_id': 238, 'author_profile': 'https://Stackoverflow.com/users/238', 'pm_score': 1, 'selected': False, 'text': '<p>Are you using the latest jQuery ?\nWhat if you try </p>\n\n<pre><code>$("code").wrapInner(document.createElement("pre"));\n</code></pre>\n\n<p>Is it any better or do you get the same result ?</p>\n'}, {'answer_id': 12810, 'author': 'Pat', 'author_id': 238, 'author_profile': 'https://Stackoverflow.com/users/238', 'pm_score': 2, 'selected': False, 'text': "<p>Btw I don't know if it is related but pre tags inside code tags will not validate in strict mode.</p>\n"}, {'answer_id': 12983, 'author': 'markpasc', 'author_id': 1472, 'author_profile': 'https://Stackoverflow.com/users/1472', 'pm_score': 5, 'selected': True, 'text': '<p>That\'s the difference between <a href="http://www.w3.org/TR/html4/struct/global.html#h-7.5.3" rel="noreferrer">block and inline</a> elements. <a href="http://www.w3.org/TR/html4/sgml/dtd.html#block" rel="noreferrer"><code>pre</code> is a block level element</a>. It\'s not legal to put it inside a <code>code</code> tag, which <a href="http://www.w3.org/TR/html4/struct/text.html#h-9.2.1" rel="noreferrer">can only contain inline content</a>.</p>\n<p>Because browsers have to support whatever godawful tag soup they might find on the real web, Firefox tries to do what you mean. IE happens to handle it differently, which is fine by the spec; behavior in that case is unspecified, because it should never happen.</p>\n<ul>\n<li>Could you instead <em>replace</em> the <code>code</code> element with the <code>pre</code>? (Because of the block/inline issue, technically that should only work if the elements are inside <a href="http://www.w3.org/TR/html4/sgml/dtd.html#flow" rel="noreferrer">an element with &quot;flow&quot; content</a>, but the browsers might do what you want anyway.)</li>\n<li>Why is it a <code>code</code> element in the first place, if you want <code>pre</code>\'s behavior?</li>\n<li>You could also give the <code>code</code> element <code>pre</code>\'s whitespace preserving power with the CSS <a href="http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm" rel="noreferrer"><code>white-space: pre</code></a>, but apparently <a href="http://www.quirksmode.org/css/whitespace.html" rel="noreferrer">IE 6 only honors that in Strict Mode</a>.</li>\n</ul>\n'}, {'answer_id': 14501, 'author': 'Vincent Robert', 'author_id': 268, 'author_profile': 'https://Stackoverflow.com/users/268', 'pm_score': 1, 'selected': False, 'text': '<p>As markpasc stated, a PRE element inside CODE element is not allowed in HTML. The best solution is to change your HTML code to use &lt;pre>&lt;code> (which means a preformatted block that contains code) directly in your HTML for code blocks.</p>\n'}, {'answer_id': 7108933, 'author': 'Harry B', 'author_id': 897266, 'author_profile': 'https://Stackoverflow.com/users/897266', 'pm_score': 1, 'selected': False, 'text': "<p>You could use html() to wrap it:</p>\n\n<pre><code>$('code').each(function(i,e)\n{\n    var self = $(e);\n    self.html('&lt;pre&gt;' + self.html() + '&lt;/pre&gt;');\n});\n</code></pre>\n\n<p>As mentioned above, you'd be better off changing your html. But this solution should work.</p>\n"}]
['https://Stackoverflow.com/questions/12794', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/311/']