Javascript Changing button inner text without chaning the icon

Issue

I created the following button, and want to change the inner text "test" to other word.

            <button type="button" id="test"><i class="fa-2x fa-regular fa-floppy-disk"></i>test</button>

I tried below method it can change the word but also deleted the icon.

$('button#bkmarktest').on('click', function(e){
e.preventDefault(); 
$(this).text("other");
});

Is there any way that can only change the word, but keeping the icon, thanks!

Solution

like @Kunal Tanwar said, wrapping the text in a span solves it and using Jquery this is my approach.. assuming the button has an id of test

using the .find() method to find the span child

<button type="button" id="test">
  <i class="fa-2x fa-regular fa-floppy-disk"></i>
  <span>test<span>
</button>

$('#test').on('click', function(e){
  e.preventDefault(); 
  $(this).find('span').text("other");
});

and another option would be to use the decendant selector since the span is a direct child of the button

$('#test').on('click', function(e){
  $('#test > span').text('other');
});

Answered By - Ande Caleb