Question

---

My Code

I have this html

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

And this jQuery

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

---

Problem

When the link is clicked I am getting:

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

---

Desired Result

I want to preserve the <i> element and get this:

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

The HTML cannot be modified

---

play along on jsFiddle

Answer 1

The best way to do it is the following:

Adding a span:

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

Add your text inside a span and then update your span text.

Demo

Without modify html:

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

Demo

or

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

Demo