Question

I have the following HTML snippet:

<span class="target">Change me <a class="changeme" href="#">now</a></span>

I’d like to change the text node (i.e. “Change me “) inside the span from jQuery, while leaving the nested <a> tag with all attributes etc. intact. My initial huch was to use .text(...) on the span node, but as it turns out this will replace the whole inner part with the passed textual content.

I solved this with first cloning the <a> tag, then setting the new text content of <span> (which will remove the original <a> tag), and finally appending the cloned <a> tag to my <span>. This works, but feels such an overkill for a simple task like this. Btw. I can’t guarantee that there will be an initial text node inside the span – it might be empty, just like:

<span class="target"><a class="changeme" href="#">now</a></span>

I did a jsfiddle too. So, what would be the neat way to do this?

Answer 1

Try something like:

$('a.changeme').on('click', function() {
  $(this).closest('.target').contents().not(this).eq(0).replaceWith('Do it again ');
});

demo: http://jsfiddle.net/eEMGz/

ref: http://api.jquery.com/contents/

Update:

I guess I read your question wrong, and you’re trying to replace the text if it’s already there and inject it otherwise. For this, try:

$('a.changeme').on('click', function() {
  var
    $tmp = $(this).closest('.target').contents().not(this).eq(0),
    dia = document.createTextNode('Do it again ');

  $tmp.length > 0 ? $tmp.replaceWith(dia) : $(dia).insertBefore(this);
});

​Demo: http://jsfiddle.net/eEMGz/3/