jQuery: how to replace content without affecting children

Question

hi,

I want to replace tag with tag, but not replacing all the children elements (just the parent). How to do it with jQuery ?

thanks

Answer 1

var elToRemove = $('your-element');
var children = elToRemove.children().detach();

elToRemove.replaceWith('<whatever id="something">Foo Bar</whatever>').append(children);

Note that this actually removes the parent element, and inserts a new one, so all details such as event handlers and data will be lost on the parent, but is preserved on the children.

Answer 2

I'm not sure I entirely understand the question, but perhaps this is the answer? ;-)

$('#replaceme').children().unwrap().wrap('<div id="new"></div>');

See it in action: http://jsbin.com/adene3/edit

Doc:

• Wrap: http://api.jquery.com/wrap/
• Unwrap: http://api.jquery.com/unwrap/