Get text nested within elements in jQuery

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

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);

Answer 2

You can access the contents of bb using $('#bb') and then obtain its contents like so;

$bb('#bb').text();

Does that answer your q?

See this for more info.

Answer 3

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.