jquery - 如何使用 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

---

在 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;
});​

在 a 中添加您的文本span，然后更新您的跨度文本。

演示

不修改 html：

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

演示

或者

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

演示

Answer 2

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

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

我假设要保存的文本将始终位于 i 标记中

编辑：改为使用 prepend，现在它可以在 jsfiddle 中使用。无需更改 HTML 编辑：删除每个 @Ariel 的 .clone

Answer 3

是的，这并不容易做到。

最好的选择是将要更改的部分包装在 a 中<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/