Question

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

Answer 1

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.