Меняем HTML и текст селектора.
Прочитать материалы из предыдущего урока можно по этой ссылке: jQuery. Урок 4
5.1 Как изменить HTML внутри элемента
Мы уже познакомились с изменением CSS стилей, используя .css(..), и теперь рассмотрим как добавить HTML код. Наш HTML элемент выглядит так:
<div class="js-main main"></main>
Как мы видим, он в данный момент пуст. Добавим в него ссылку при помощи .html():
$('.js-main').html('<a href="#">Click</a>');
Обратите внимание, добавляем через одинарные кавычки, т.к. HTML в большинстве случаев использует двойные (для атрибутов), и при такой записи конфликтов и ошибок быть не должно.
5.2 Как изменить текст на jQuery
Используем .html():
$('.js-main').html('Button text');
Но, лучше использовать .text() :
$('.js-main').text('New text');
Оба примера полностью удаляют всё содержимое блока, и меняют на ту строку, что вы передали в одинарных кавычках. Это нужно учитывать правильно подобрав CSS селектор.
Следите за кавычками в тексте, чтобы они не создавали ошибок в коде.
5.3 Как получить текст элемента на jQuery
Чтобы получить текст выбранного селектора, необходимо вызвать .text() без параметров, следующим образом (результат выведем в консоль браузера):
console.log($('#tag_lessons').text());
Как вы понимаете, с получением html элемента история точно такая же 🙂 . Но используется гораздо реже чем text():
console.log($('#tag_lessons').html());
5.4 Консоль браузера
console.log() – вывод в консоль вашего браузера. Используется для разных целей и вообще это незаменимая штука 🙂
Поможет вывести значения переменных, отловить баги, “удивится прекрасной математике” javascript`а, посмотреть содержание массива (объекта) и многое другое. Вызвать можно в браузере, например, при помощи клавиши F12 либо Ctrl+Shift+I.
Читать далее Часть 6.
