Best way to switch packaging elements with jQuery

Question

I have this code in HTML

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

How to use jQuery to switch the external SPAN element with the next block of code in the table so that the "Attachments" text is wrapped in a table element.

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

Answer 1

You can create a table with tr and td, paste the HTML content from the span into this new td element, insert the table immediately after the span, and finally delete the span.

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

I assume you mean swap by swipe? So why I deleted the original range. If this is not the case, just leave the remove call.

Answer 2

Wrap the #s element, and then replace it with your own content:

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

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

Following further discussion in the comments below, it seems like the OP wanted to create an ad-hoc table and insert #s in any of its td . Could be better:

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