Jquery Question posted in
The official Jquery Api Documentation can be found here.

How do I change the text of a button with jQuery without deleting a span with icons?

I have this button, shown here as it appears when using Developer Tools on Chrome and doing an inspect:

<button type="button" class="btn" data-action-type="2">
  <span class="glyphicon glyphicon-ok>
    ::before
  </span>
  " Action "
</button>

I want to change "Action" to "No Action", so I do this:

var btn = $('[data-action-type = "2"]'); 
btn.text('No Action');

This does change the text, but it also wipes out the span, and thus my icon. How do I change the text while keeping the icon? I tried console.log(btn) to see if I could find where "Action" is and attempt to change just that, but I couldn’t find it.

Tags:

2

Answers


  1. 0

    You want to use

    var btn = $('[data-action-type = "2"]'); 
btn.html('<span class="glyphicon glyphicon-ok>::before</span>No Action');
    Login or Signup to reply.
  2. 0

    If you have a static span in the button tag you can do this
    var button = $('[data-action-type = "2"]');
    button.html('<span class="glyphicon glyphicon-ok"> ::before </span> Some Text')

    If you have a span but thats not static, what you can do is:
    var button = $('[data-action-type = "2"]');
    button.contents().last()[0].nodeValue = "Byee"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search