JavaScript — меняем текст html

JavaScriptJavaScript — меняем html. Ну что же, наконец пришла очередь постепенно разучивать и этот язык. JavaScript работает с DOM (Document Object Model). То есть со страницей напрямую. Он способен получать элементы и менять их. Сегодня мы научимся получать и менять html элемента по его id.

JavaScript — меняем текст html

Прежде всего стоит понять, что JavaScript весьма функциональный язык, который поддерживает объектно-ориентированный подход. Мы будем учиться работать со страницей. Первое что нужно сделать для изменения внутреннего html это заиметь на этой странице какой-нибудь блок. Давайте напишем его:

Привет, я рандомный блок текста, сегодня ты поймешь как работает document object model и как с этой моделью работать. Не переживай, я всего лишь тестовый блок. Кнопка которую ты увидишь предназначена для того, чтобы меня изменить, пока ты пребываешь на этой странице.

Этот блок имеет следующие настройки:

Теперь напишем функцию, которая будет получать внутренний html блока выше:

Таким образом функция при вызове будет искать на странице DOM-а элемент с id=someclass. Но этого недостаточно. Для того, чтобы изменить содержимое блока необходимо дописать инструкцию, которая будет менять внутренний html. Для этого модернизируем нашу функцию следующим образом:

Хорошо. Теперь функцию GetDivById() нужно вызвать. Давайте создадим простую кнопку и сразу прикрутим к ней функцию:

Так как вордпресс удаляет потенциально вредоносный код, в данный момент мы не можем вам продемонстрировать работу JavaScript-а, но вы можете создать отдельный файл, куда можете поместить весь имеющийся код и проверить его работоспособность. В результате после нажатия на кнопку мы поменяем текст html с помощью функции JavaScript внутри блока someclass на текст из функции GetDivById().

Что же, на этом все. Это первая статья по JavaScript, в дальнейшем их станет гораздо больше. Так же мы планируем выпустить ряд видеороликов по этому языку. Спасибо за внимание, не забывайте про группу в ВК и канал на ютубе!

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

Опиши свой кейс здесь, если у тебя остались вопросы и мы обязательно ответим...