Làm cách nào để thêm thẻ trước vào trong thẻ mã với jQuery?

Question

Tôi đang cố gắng sử dụng jQuery để định dạng khối mã, đặc biệt để thêm một thẻ <pre> bên trong thẻ <code>:

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

Firefox áp dụng định dạng một cách chính xác, nhưng IE đặt toàn bộ khối mã trên cùng một dòng. Nếu tôi thêm một cảnh báo

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

Tôi thấy rằng IE đã chèn một số văn bản bổ sung vào thẻ trước:

<PRE jQuery1218834632572="null"> 

Nếu tôi tải lại trang, số lượng sau những thay đổi jQuery.

Nếu tôi sử dụng wrap() thay vì wrapInner(), để quấn <pre> bên ngoài thẻ <code>, cả IE và Firefox đều xử lý chính xác. Nhưng không nên <pre> cũng hoạt động bên trong<code>?

Tôi muốn sử dụng wrapInner() vì tôi sau đó có thể thêm một lớp CSS cho thẻ <pre> để xử lý tất cả các định dạng, nhưng nếu tôi sử dụng wrap(), tôi có phải đặt trang định dạng CSS trong <pre> thẻ và văn bản/font định dạng trong thẻ <code> hoặc Firefox và IE đều bị nghẹn. Không phải là một vấn đề lớn, nhưng tôi muốn giữ nó càng đơn giản càng tốt.

Có ai khác đã gặp phải điều này không? Tui bỏ lỡ điều gì vậy?

Answer 1

Đó là sự khác biệt giữa các yếu tố block and inline. pre is a block level element. Việc đặt thẻ bên trong một thẻ code là không hợp lệ, trong đó can only contain inline content.

Bởi vì các trình duyệt phải hỗ trợ bất kỳ món súp thẻ đáng tin cậy nào mà họ có thể tìm thấy trên web thực, Firefox cố gắng làm những gì bạn muốn. IE xảy ra để xử lý nó một cách khác nhau, đó là tốt bởi spec; hành vi trong trường hợp đó là không xác định, bởi vì nó sẽ không bao giờ xảy ra.

• thể bạn thay vì thay yếu tố code với pre? (Do vấn đề khối/nội tuyến, về mặt kỹ thuật chỉ nên hoạt động nếu các phần tử bên trong an element with "flow" content, nhưng trình duyệt có thể làm những gì bạn muốn.)
• Tại sao nó lại là một yếu tố code, nếu bạn muốn pre hành vi của?
• Bạn cũng có thể cung cấp phần tử khoảng trắng khoảng trắng pre với CSS white-space: pre, nhưng rõ ràng là IE 6 only honors that in Strict Mode.

Answer 2

Bạn đang sử dụng jQuery mới nhất? Điều gì xảy ra nếu bạn thử

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

Có tốt hơn hoặc bạn có kết quả tương tự không?

Answer 3

Btw Tôi không biết liệu nó có liên quan hay không nhưng các thẻ trước bên trong các thẻ mã sẽ không xác thực ở chế độ nghiêm ngặt.

Answer 4

Như markpasc đã nêu, phần tử PRE bên trong phần tử CODE không được phép trong HTML. Giải pháp tốt nhất là thay đổi mã HTML của bạn để sử dụng < trước> < mã> (có nghĩa là một khối được định dạng sẵn có chứa mã) trực tiếp trong HTML của bạn cho các khối mã.

Answer 5

Bạn có thể sử dụng html() để quấn nó:

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

Như đã đề cập ở trên, bạn muốn được tốt hơn thay đổi html của bạn. Nhưng giải pháp này sẽ hoạt động.