Изменить текст, но не значок внутри кнопки

Question

У меня есть button со следующим значком, созданным с помощью bootstrap и font-awesome

<button id="btnFavorite" class="btn btn-warning pull-right" style="margin-right: 5px;" onclick="addToFavorites()">
    <i id="imgFavorite" class="fa fa-star"></i>  Favorite
</button>

С помощью jQuery я хочу обновить текст "Избранное", не касаясь части <i id="imgFavorite" class="fa fa-star"></i>.

Когда я проверяю $("#btnFavorite").text(), я получаю «Избранное», но когда я использую $("#btnFavorite").text("Some value"), это не только обновляет текст, но и удаляет <i id="imgFavorite" class="fa fa-star"></i> часть.

Я пытался $("Some text").insertAfter("#imgFavorite"); но это не меняет текст вообще.

Как я могу просто обновить текст, но сохранить значок в то же время?

Answer 1

Jquery .text() удалит теги html.

Пожалуйста, используйте .html(), если вам нужно манипулировать html.

$('#btnFavorite').html(function() {
  return $(this).html().replace($(this).text(), 'Some value');
});

Answer 2

Просто поместите текст кнопки внутри div :

$('body').append("<button id='btnFavorite' class='btn btn-warning pull-right' style='margin-right: 5px;' onclick='addToFavorites()'><i id='imgFavorite' class='fa fa-star'></i> <div class='btn_txt'>Favorite</div> </button>")

И style соответственно:

$('.btn_txt').css('font-size', '20px').css('display', 'inline')

Результат :

Answer 3

Самое простое решение - просто поместить текст кнопки в диапазон и вместо этого выбрать диапазон.

function addToFavorites() {
  $('#btnFavorite span').text('Some value');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" crossorigin="anonymous">
<button id="btnFavorite" class="btn btn-warning pull-right" style="margin-right: 5px;" onclick="addToFavorites()"><i id="imgFavorite" class="fa fa-star"></i>  <span>Favorite</span></button>

---

Если вы не можете редактировать HTML и хотите использовать только jQuery, то это также опция:

function addToFavorites() {
  $('#btnFavorite').contents().filter(function() {
    return this.nodeType == 3 && this.textContent.trim();
  })[0].textContent = ' Some text';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" crossorigin="anonymous">
<button id="btnFavorite" class="btn btn-warning pull-right" style="margin-right: 5px;" onclick="addToFavorites()"><i id="imgFavorite" class="fa fa-star"></i>  Favorite</button>