javascript - 如何使用 jQuery 更改 span 内的文本，同时保持其他 span 包含的节点完好无损？

Question

我有以下 HTML 片段:

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

我想在 jQuery 范围内更改文本节点(即“Change me”)，同时保留嵌套的 <a>具有所有属性等的标签完好无损。我最初的想法是使用 .text(...)在跨度节点上，但因为它 turns out这将用传递的文本内容替换整个内部部分。

我通过首先克隆 <a> 解决了这个问题标签，然后设置<span>的新文本内容(这将删除原始的 <a> 标签)，最后附加克隆的 <a>标记到我的 <span> .这行得通，但是对于像这样的简单任务来说感觉太过分了。顺便提一句。我不能保证跨度内会有一个初始文本节点——它可能是空的，就像:

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

我做了一个jsfiddle也。那么，执行此操作的巧妙方法是什么？

Answer 1

尝试这样的事情:

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

演示:http://jsfiddle.net/eEMGz/

引用:http://api.jquery.com/contents/

更新:

我想我读错了你的问题，如果文本已经存在，你正试图替换它，否则注入(inject)它。为此，请尝试:

$('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);
});

演示:http://jsfiddle.net/eEMGz/3/