I have this DOM structure:
<span id="aa"><a id="bb">myname</a> test test test</span> I want to be able to select #aa and then split #bb away from the text "test test test" since I need to perform some string operations (replace) with the text. How do I select just the text in this case? And then after the string replace operation, I want to make sure I can merge it back to #bb and within #aa.
Let me know the best way to approach. Thanks
You can remove DOM elements temporarily:
$(function () { var $aa = $('#aa'), $bb = $('#bb'); $bb.remove(); // remove bb $aa.text($aa.text().replace(/test/g, 'replaced')); // text manipulations on aa $bb.prependTo($aa); // restore the removed element }); The remove function removes the element from the DOM, but the elements will still available on the jQuery object, allowing you to use it further.
Check an example here.
If I understood you correctly this is what you want to do:
var bb = $('#bb'); var foo = bb.clone(); bb.remove(); // ... do whatever you like with #aa here // restore #bb element $('#aa').prepend(foo); If you would like to modify the contents of the #bb it's even easier:
var bb = $('#bb'); var text = bb.text(); // ... do whatever you like with text here // save new text bb.text(text); 
