How to update text node of element using jQuery?

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  element and get this:

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

The HTML cannot be modified

play along on jsFiddle

Ricardo Lohmann · Accepted Answer · 2012-08-03 04:00:08Z

2

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

edited Aug 3, 2012 at 4:00

answered Aug 3, 2012 at 3:43

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricardo Lohmann Over a year ago

@naomik Now I have a third :)

Mulan Over a year ago

Thanks again, Ricardo. I really like the fn(i, text) solution :)

Farly Taboada · Accepted Answer · 2012-08-03 03:58:58Z

0

maybe this will help..

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

answered Aug 3, 2012 at 3:58

Farly Taboada

963 bronze badges

Comments

Jory Cunningham · Accepted Answer · 2012-08-03 04:00:19Z

0

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

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

I'm assuming that the text to save will always be in an i tag

EDIT: Used prepend instead, now it works in jsfiddle. No HTML change necessary EDIT: removed .clone per @Ariel

edited Aug 3, 2012 at 4:00

answered Aug 3, 2012 at 3:39

Jory Cunningham

7425 silver badges6 bronze badges

4 Comments

Ariel Over a year ago

Why would you clone it and then use it in text()? Just grab the text() from it as a string and don't clone the node. And in any case you can't use dom elements that way in string concatenation.

Jory Cunningham Over a year ago

edited for a better fix. Still using clone because I'm assuming we want to preserve the i tag itself with the content and the "Some Text to Update" is not constant. It works in the JSfiddle

Ariel Over a year ago

You don't need clone. Use the original element directly - you don't need a copy of it.

Ariel Over a year ago

Not the html of the original, the actual original dom element, so the tag is preserved. i.e. just remove clone() it doesn't nothing useful.

Ariel · Accepted Answer · 2012-08-03 04:04:42Z

0

Yah, that's not easy to do.

Best option is to wrap the part you want to change in a :

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

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

Second best option is to extract the  part and reuse it:

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

edited Aug 3, 2012 at 4:04

answered Aug 3, 2012 at 3:39

Ariel

26.8k5 gold badges62 silver badges71 bronze badges

6 Comments

Musa Over a year ago

I was about to suggest using a span, also the second option doesn't preserve the  tag

Jory Cunningham Over a year ago

She said she cannot change the HTML

Mulan Over a year ago

I can't change the original HTML :(

Mulan Over a year ago

Ariel, I can't change the HTML to use a .

Ariel Over a year ago

@naomik There are two solutions listed, use the second one.

|

Collectives™ on Stack Overflow

How to update text node of element using jQuery?

My Code

Problem

Desired Result

play along on jsFiddle

4 Answers 4

2 Comments

Comments

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My Code

Problem

Desired Result

4 Answers 4

2 Comments

Comments

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related