Как изменить текст элемента при помощи jQuery?

Приветствую вас, дорогие друзья!

Давайте рассмотрим как изменить текст в блоке, кнопке, ссылке или другом элементе страницы при помощи jQuery.

Задача замены текста в блоке или кнопке встречается довольно часто. В идеале вычислить фрагмент кода, в котором этот текст выводится и изменить текст в коде. Однако, бывают ситуации, когда такой вариант не подходит, например, если соответствующий код подгружается с другого сайта, или текст должен меняться динамически после определённых действий посетителя, или по каким-то причинам вы не можете внести правки в код, где выводится этот текст.

В таких случая нам на помощь приходит JavaScript, а точнее его библиотека jQuery.

Как изменить текст элемента с помощью jQuery?

Для того чтобы изменить текст в блоке или другом элементе нам нужно:

1. 1 Определиться с селектором, то есть определить класс или идентификатор этого элемента.
   Как определять класс и идентификатор расписано в этой статье с видео инструкцией: «Изменение темы WordPress. Определение Class и ID»
2. 2 Далее нам нужно перед закрытием тега </body> вставить следующий код:
   
   <script> jQuery(document).ready(function($) { $('.selector').html('Здесь ваш текст'); }); </script>

   1 2 3 4 5

   <script> jQuery(document).ready(function($) { $('.selector').html('Здесь ваш текст'); }); </script>

   
   Вместо .selector вы пишете класс или идентификатор вашего блока или элемента.
   Напоминаю, что для ID перед названием ставим символ «#», а для class ставим символ «.» (точка).

   Там где написано ‘Здесь ваш текст’ указываете свой текст так же в кавычках.

Как определить куда вставлять этот код?

Как я уже писала выше, код данного скрипта нужно вставить перед закрытием тега </body> . Для сайтов, работающих а CMS, этот тег будет закрываться в соответствующем файле шаблона, который находится в папке с активной темой. Данный шаблон может называться footer.php, bottom.php, footer.tpl и т.п. в зависимости от CMS.

Для WordPress это будет файл footer.php, который лежит в папке с активной темой по адресу:

Как изменить текст кнопки с помощью jQuery?

С изменением текста кнопки ситуация обстоит немного иначе так как там надпись на кнопке задаётся не как внутреннее содержимое тега, а через атрибут value. Следовательно, и скрипт будет другим, так как нам нужно изменить значение этого атрибута.

Точно так же перед закрытием тега </body> добавляем следующий код:

Вместо «.selector» указываете свой селектор, вместо «Ваш текст» — нужный текст.

Надеюсь что помогла вам понять как изменить текст блока, кнопки или другого элемента.
Буду очень рада видеть ваши комментарии! Так же, если статья была для вас полезной не забывайте делиться ею в соцсетях, нажав на кнопу одной из соцсетей внизу статьи. Так вы помогаете мне развивать мой проект.

Спасибо что дочитали статью до конца! Удач вам!

С уважением Юлия Гусарь