CODEWITHSUNDEEP
jquery
user1184100
user1184100

Reputation: 6894

How to replace text of anchor tag without deleting any inner tags?

How to replace text of anchor tag without deleting any inner tags?

<div class="xyz">
  <a>Hello <b class="caret"></b></a>
</div>

$('.xyz').click(function(){
  $(this).find('a').text('hello2');  
});

JSFiddle : http://jsfiddle.net/DXR32/

When the blue area is click i'm changing the text within anchor tag , but even the b tag within anchor also goes off. Anyway to fix this?

Upvotes: 1

Views: 3405

Answers (5)

Stu
Stu

Reputation: 4150

Something like the following would work, appending the button onto the end of any text changes: http://jsfiddle.net/DXR32/1/

var blueButton = '<b class="caret"></b>';

$('.xyz').click(function(){
   $(this).find('a').html('hello2 '+blueButton); 
});

Edit:

Or, as @Nikola Radosavljević and @François Wahl suggest below, encapsulating the text you want changing within its own element inside the anchor like so:

<div class="xyz">
    <a><span class="switchable">Hello</span> <b class="caret"></b></a>
</div>

$('.xyz').click(function(){
   $(this).find('.switchable').text('hello2');
});

this avoids having to hard code any button html, and also allows you to reuse the click function on any number of anchor elements, all they need is their own span with class switchable containing the text you want to switch out, for example;

<div class="xyz">
    <a><span class="switchable">Click Me 1</span> <b class="caret"></b></a>
</div>
<div class="xyz">
    <a><span class="switchable">Click Me 2</span> <b class="caret2"></b></a>
</div>
<div class="xyz">
    <a><span class="switchable">Click Me 3</span> <b class="caret3"></b></a>
</div>

$('.xyz').click(function(){
   $(this).find('.switchable').text('You Clicked Me!');
});

Obviosuly your app may differ completely from that last example.

Upvotes: 2

Nikola Radosavljević
Nikola Radosavljević

Reputation: 6911

You have two options

<div class="xyz">
    <a><span id="hello">Hello </span><b class="caret"></b></a>
</div>
$('.xyz').click(function() {
    $(this).find('#hello').text('hello2');
});

$('.xyz').click(function() {
    var a = $(this).find("a");
    a.html(a.html().replace("Hello ", "Hello2 "));    
});

Upvotes: 2

Paul Aldred-Bann
Paul Aldred-Bann

Reputation: 6020

You can try saving the .children() of the anchor before replacing the text, like so:

$('.xyz').click(function() {
    var cache = $(this).find('a').children();
    $(this).find('a').text('Hello2');
    $(this).find('a').append(cache);
});​

And then .append() ing them back after. I've updated your jsFiddle with this.

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

$('.xyz').click(function(){
    $(this).find('a').html(function(i, oldHtml) {
      return oldHtml.replace('Hello', 'hello2');
    });
});    
​

DEMO

Upvotes: 0

Ram
Ram

Reputation: 144659

Try this:

$('.xyz').click(function(){
   var b = '<b class="caret"></b>'; 
   $(this).find('a').html('hello2' + b);    
});

http://jsfiddle.net/DXR32/3/

Upvotes: 0

Related Questions