Cách tốt nhất để chuyển đổi gói các yếu tố sử dụng jQuery

Question

tôi có mã này trong HTML

<span id="s">Attachments</span> 

Làm thế nào để sử dụng jQuery để chuyển đổi các yếu tố SPAN ngoài với khối mã bảng sau, do đó "đính kèm" text trở nên quấn với phần tử bảng.

<table id="t"> 
    <tr> 
    <td>Attachments</td> 
    </tr> 
</table> 

Answer 1

Bạn có thể tạo một bảng với một tr và td, chèn nội dung HTML từ nhịp vào đó yếu tố td mới, chèn bảng ngay sau khi khoảng thời gian, và cuối cùng, loại bỏ các khoảng thời gian.

$("<table id='t'><tr><td>" + $("#s").html() + 
    "</td></tr></table").insertAfter("#s"); 

$("#s").remove(); 

Tôi giả định bằng "vuốt" nghĩa là "hoán đổi"? Vì vậy, đó là lý do tại sao tôi đã loại bỏ khoảng gốc. Nếu không phải như vậy, chỉ cần thoát khỏi cuộc gọi remove.

Answer 2

Bó yếu tố #s, sau đó thay thế nó với nội dung riêng của nó:

$("#s") 
    .wrap("<table id='t'><tr><td></td></tr></table>") 
    .replaceWith(function(){ 
     return this.innerHTML; 
    }); 

Demo: http://jsbin.com/elotan/edit#source

Sau thảo luận thêm trong các ý kiến ​​dưới đây, nó xuất hiện OP muốn để có thể tạo ra một bảng ad-hoc và chèn #s vào bất kỳ số nào trong số td của nó. Sau đây có thể được tốt hơn:

$("<table>", { 
    id:'t', html:'<tr><td>Foo</td><td>' + $("#s").html() + '</td></tr>' 
}).replaceAll("#s");