如何使用jQuery更新元素的文本节点？

Question

---

我的代码

我有这个HTML

​<a href="#">
    <i>[please keep this]</i>
    Some Text To Update
</a>​​​​​​​​​​​​​​​​​​​​​​​

这个jQuery

$('a').click(function(){
    $(this).text('Updated Text');
    return false;        
});​

---

问题

点击链接后，我得到：

<a href="#">Updated Text</a>

---

期望结果

我想保留<i>元素并获取此内容：

<a href="#"><i>[please keep this]</i> Updated Text</a>

无法修改HTML

---

play along on jsFiddle

Answer 1

最好的方法如下：

添加范围：

<a href="#">
    <i>[please keep this]</i>
    <span class="replace">Some Text To Update</span>
</a>​​​​​​​​​​​​​​​​​​​​​​​


$('a').click(function(){
    $('.replace', this).text('Updated Text');
    return false;
});​

在span中添加文字，然后更新范围文字。

Demo

不修改HTML ：

$('a').click(function(){
    $(this).html(function(i, text) {
        return text.substr(0, text.lastIndexOf('>') + 1) + 'Updated Text';
    });
    return false;
});

Demo

或

$('a').click(function(){
    var $keep = $('i', this);
    $(this).empty().append($keep).append('Updated Text');
});

Demo

Answer 2

$('a').click(function(){
var saveThis = $(this).children('i');

$(this).text('Updated Text').prepend(saveThis);
 return false;        
  });​

我假设要保存的文本总是在i标签中

编辑：使用prepend代替，现在它在jsfiddle中工作。无需更改HTML 编辑：删除.clone @Ariel

Answer 3

是的，这不容易做到。

最佳选择是在<SPAN>包裹您要更改的部分：

<a href="#">
    <i>[please keep this]</i>
    <span>Some Text To Update</span>
</a>​​​​​​​​​​​​​​​​​​​​​​​

$('a span').....

第二个最佳选择是提取<i>部分并重复使用它：

var i = $('i', this);
$(this).empty().append(i, ' Updated Text'));

Answer 4

也许这会有所帮助..

http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/