Как добавить предварительный тег внутри тега кода с помощью jQuery?

Question

Я пытаюсь использовать jQuery для форматирования блоков кода, особенно для добавления тега <pre> внутри тега <code>:

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

"); });

Firefox правильно применяет форматирование, но IE помещает весь блок кода в одну строку. Если я добавлю предупреждение

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

Я вижу, что IE вставил дополнительный текст в тег pre:

<PRE jQuery1218834632572="null">

Если я перезагрузлю страницу, число, следующее за jQuery, изменится.

Если я использую wrap() вместо wrapInner(), чтобы обернуть <pre> вне тега <code>, IE и Firefox обрабатывают его правильно. Но разве <pre> не должно работать внутри <code>?

Я бы предпочел использовать wrapInner(), потому что затем я могу добавить класс CSS к тегу <pre> для обработки всего форматирования, но если я использую wrap(), я должен поместить CSS форматирования страницы в <pre> тег и форматирование текста / шрифта в теге <code>, либо Firefox и IE оба захлебнулись Не такая уж большая сделка, но я бы хотел сделать ее максимально простой.

Кто-нибудь еще сталкивался с этим? Я что-то упустил?

Answer 1

Это разница между блоком и встроенными элементами. pre является элементом уровня блока . Недопустимо помещать его в тег code, который может содержать только встроенный контент .

Поскольку браузеры должны поддерживать любой чудовищный суп с тегами, который они могут найти в реальной сети, Firefox пытается сделать то, что вы имеете в виду. IE, случается, обрабатывает это по-другому, что хорошо спецификацией; поведение в этом случае не определено, потому что оно никогда не должно происходить.

• Не могли бы вы вместо заменить элемент code на pre? (Из-за блочной / встроенной проблемы, технически это должно работать, только если элементы находятся внутри элемента с «потоком» содержимого , но браузеры могут делать то, что вы хотите в любом случае.)
• Почему это элемент code, если вы хотите поведение pre?
• Вы также можете придать элементу code, сохраняющему пробелы, pre мощь с помощью CSS white-space: pre, но, очевидно, IE 6 только учитывает это в строгом режиме .

Answer 2

Кстати, я не знаю, связано ли это, но предварительные теги внутри тегов кода не будут проверяться в строгом режиме.

Answer 3

Вы можете использовать html (), чтобы обернуть его:

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

'); });

Как уже упоминалось выше, вам лучше поменять HTML. Но это решение должно работать.

Answer 4

Как указано в markpasc, элемент PRE внутри элемента CODE в HTML не допускается. Лучшее решение - изменить HTML-код на использование

 (что означает предварительно отформатированный блок, содержащий код) непосредственно в HTML-коде для блоков кода. 

Answer 5

Вы используете последнюю версию jQuery? Что если вы попробуете

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

Это лучше или вы получаете тот же результат?