更改按钮文本而无需更改按钮图标

Question

I have next button:

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

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/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?

Answer 1

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.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/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.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/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> 

Answer 2

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.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/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> 

Answer 3

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.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/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>');

Answer 4

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.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/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> 

Answer 5

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