Как добавить предварительный тег внутри тега кода с помощью jQuery?
Я пытаюсь использовать jQuery для форматирования блоков кода, в частности, чтобы добавить тег <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(), потому что затем я могу добавить класс CSS в тег <pre> для обработки всего форматирования, но если я использую wrap(), мне нужно поместить CSS форматирования страницы в тег <pre> и форматирование текста / шрифта в тег <code>. , или Firefox и IE задыхаются. Ничего особенного, но я бы хотел, чтобы это было как можно проще.
кто-нибудь еще сталкивался с этим? Я что-то пропустил?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы используете последнюю версию jQuery? Что если вы попробуете
$("code").wrapInner(document.createElement("pre"));
Так лучше или результат такой же?
Кстати, я не знаю, связано ли это, но предварительные теги внутри тегов кода не будут проверяться в строгом режиме.
В этом разница между элементами блочный и встроенный. pre - это элемент блочного уровня.. Нельзя помещать его в тег code, который может содержать только встроенный контент.
Поскольку браузеры должны поддерживать любой ужасный суп из тегов, который они могут найти в реальной сети, Firefox пытается делать то, что вы имеете в виду. IE обрабатывает это по-другому, и это нормально по спецификации; поведение в этом случае не определено, потому что этого никогда не должно происходить.
- Не могли бы вы вместо заменять элемента
codeиспользоватьpre? (Из-за проблемы с блокировкой / встроенным кодом технически это должно работать, только если элементы находятся внутри элемент с «потоком» содержимого, но браузеры в любом случае могут делать то, что вы хотите.) - Почему это вообще элемент
code, если вам нужно поведениеpre? - Вы также можете дать элементу
codeвозможность сохранения пробеловpreс помощью CSSwhite-space: pre, но, очевидно, IE 6 учитывает это только в строгом режиме.
Как указано в markpasc, элемент PRE внутри элемента CODE не допускается в HTML. Лучшее решение - изменить свой HTML-код для использования
<pre><code> (which means a preformatted block that contains code) directly in your HTML for code blocks.</code></pre>Вы можете использовать html (), чтобы обернуть его:
$('code').each(function(i,e)
{
var self = $(e);
self.html('<pre>' + self.html() + '</pre>');
});
Как упоминалось выше, вам лучше изменить свой html. Но это решение должно работать.
Использование тега кода может быть оправдано как более семантическое, а не потому, что оно делает его правильным.