Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
32
rated 0 times [  37] [ 5]  / answers: 1 / hits: 16864  / 12 Years ago, sun, april 1, 2012, 12:00:00

How do I use javascript/jquery to change the text on a button in Twitter Bootstrap without destroying the icon?



So, this is my static markup:



<a class=btn id=myButton onclick=doSomething()><i class=icon-ok></i> Do it...</a>


I am able to change the icon, like this:



$('#myButton i:first-child').attr('class','icon icon-remove');


Which is fine, but for the love of all that is good I cannot find a way to set the button text without then wiping out the icon. Eg. if I do this:



$('#myButton').text('Some Remove Text');


I lose the icon element, so how can I access just the text and edit that, whilst preserving any child elements?


More From » jquery

 Answers
12

You can wrap the content in a span element and then just find it in the context of your anchor.



$('#myButton span').text('Some Remove Text');


Also you can use $('#myButton i:first') instead of $('#myButton i:first-child') or even



$('#myButton i') or $('#myButton > i') which would be shorter.

[#86475] Friday, March 30, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
agustindejonm

Total Points: 738
Total Questions: 84
Total Answers: 84

Location: Northern Ireland
Member since Mon, Nov 14, 2022
2 Years ago
agustindejonm questions
Fri, Jun 25, 21, 00:00, 3 Years ago
Fri, Sep 18, 20, 00:00, 4 Years ago
Sat, May 16, 20, 00:00, 4 Years ago
;