I have next button:

$('.change-button-text').click(function(){
  $('.target-chooser').html('Edit target');
});

<link href=".7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href=".3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src=".1.1/jquery.min.js"></script>
<button class="btn btn-success btn-next target-chooser" type="button">
  Choose target
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button">
  Change button text
</button>

I have next button:

$('.change-button-text').click(function(){
  $('.target-chooser').html('Edit target');
});

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success btn-next target-chooser" type="button">
  Choose target
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button">
  Change button text
</button>

How change text without losing a button icon?

• javascript
• jquery
• twitter-bootstrap
• font-awesome

5 Answers 5

The easiest way to do this would be to wrap the text in a span, then target that element.

Assuming you can't amend the HTML then you can use contents() and filter() to retrieve the text node, before changing it's textContent. Try this:

$('.change-button-text').click(function() {
  $('.target-chooser').contents().filter(function() {
    return this.nodeType == 3 && this.textContent.trim();
  })[0].textContent = 'Edit target ';
});

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success btn-next target-chooser" type="button">
  Choose target
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button">
  Change button text
</button>

You could use a span tag inside of your button:

$('.change-button-text').click(function(){
  $('.target-chooser span').text('Edit targer');
});

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success btn-next target-chooser" type="button" data-target-id="">
  <span>Choose target</span>
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button" data-target-id="">
  Change button text
</button>

or if you don't want to use a span tag:

$('.change-button-text').click(function(){
  $('.target-chooser').html('Edit targer <i class="ace-icon fa fa-arrow-right"></i>');
});

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success btn-next target-chooser" type="button" data-target-id="">
  Choose target
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button" data-target-id="">
  Change button text
</button>

Add the button text in a span and change the selector to #selector>span like so:

$('.change-button-text').click(function(){
  $('.target-chooser>span').html('Edit targer');
});

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success btn-next target-chooser" type="button" data-target-id="">
  <span>Choose target</span>
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button" data-target-id="">
  Change button text
</button>

Or if you do not want to use span use the following:

var newText = 'Edit targer';
$('.target-chooser>span').html(newText+'<i class="ace-icon fa fa-arrow-right"></i>');

Try with JavaScript element properties. But this is not generic fix.

$('.target-chooser')[0].firstChild.data = 'Edit targer';

Code snippet:

$('.change-button-text').click(function(){
  $('.target-chooser')[0].firstChild.data = 'Edit targer ';
});

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success btn-next target-chooser" type="button">
  Choose target
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button">
  Change button text
</button>

You can also do it like this

$(.target-chooser).empty();
$(.target-chooser).append('<i class="ace-icon fa fa-arrow-right"></i> Edit target')

Here you can also change the icon itself