Javascript 如何使用jQuery更改span内的文本，而保留其他包含span的节点不变？

我有以下HTML代码段：

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

---

我也做了一件事。那么，做这件事的好方法是什么呢？

我想这不是一个完美的例子，但你可以使用函数

console.log($("span.target").contents()[0].data);

尝试以下方法：

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

$('a.changeme3').click(function(){
    $('span.target3').contents().get(0).data = 'Do it again';
});

演示：

参考：

更新：

我猜我看错了你的问题，你试图替换已经存在的文本，否则就插入。为此，请尝试：

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

---

​演示：

您可以使用

.contents（）

：

演示：

您可以试试这个

var $textNode, $parent;
$('.changeme').on('click', function(){
    $parent = $(this).parent(); 
    $textNode= $parent.contents().filter(function() {
            return this.nodeType == 3;
    });
    if($textNode.length){
        $textNode.replaceWith('Content changed')
    }
    else{
        $parent.prepend('New content');
    }
});

---

工作演示-

您可以将文本包装成一个span。。。但是

试试这个。

您可以更改对象的本机（非jquery）数据属性。此处更新了JSFIDLE：

比如：

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

$('a.changeme3').click(function(){
    $('span.target3').contents().get(0).data = 'Do it again';
});

contents（）获取内部，get（0）返回原始元素，.data现在是对本机js textnode的引用。（我还没有测试这个跨浏览器。）

这个JSFIDLE和答案实际上只是对这个问题答案的扩展解释：

---

编辑：不确定您需要什么布局规则，只更新以测试第一个节点，否则根据需要进行调整

您退出jQuery，因为它不能帮助您处理文本节点。以下内容将删除类为“target”的每个

元素的第一个子元素，前提是该元素存在并且是文本节点

演示：

代码：

---

“顺便说一句，我不能保证span中会有一个初始文本节点-它可能是空的”此测试用例失败。@AndrásSzepesházi我没有意识到您也想将新字符串添加到空容器中。我更新了我的答案，这里有一个演示：你忘了更新你的小提琴，但是上面引用的代码在这两种情况下都能很好地工作（即有/没有）初始文本。一个奇怪的行为是，如果

@Jasper的两侧都有文本节点，那么它可以在代码中处理。如果这种情况存在，OP会更清楚。“顺便说一句，我不能保证在范围内会有一个初始文本节点-它可能是空的”此测试用例失败。否则很酷。“顺便说一句，我不能保证跨度内会有一个初始文本节点-它可能是空的”此测试用例失败。否则很酷。“顺便说一句，我不能保证跨度内会有一个初始文本节点-它可能是空的”此测试用例失败。这似乎是在代码中向上扩展jQuery的好地方，只是为了保持工作代码的整洁；“你这么认为吗？”我不确定。如果这只是一次又一次的重复，那么一个插件就可以了，否则我会坚持不扩展jquery来完成这些小任务。谢谢！只需稍作修改，即可满足我所需的两种情况（文本替换和插入模式），或的可能副本
$(function(){
    var txt = '';
    $('.target').contents().each(function(){
        if(this.nodeType==3){
                    this.textContent = 'done ';
        }
    });
});

$('a.changeme3').click(function(){
    $('span.target3').contents().get(0).data = 'Do it again';
});

$('a.changeme').click(function() {                         
    var firstNode= $(this).parent().contents()[0];
        if( firstNode.nodeType==3){
        firstNode.nodeValue='New text';
    }
})

$('span.target').each(function() {
    var firstChild = this.firstChild;
    if (firstChild && firstChild.nodeType == 3) {
        firstChild.data = "Do it again";
    }
});