ВебмастерскаяСекреты вебмастера

Измененяем страницу через консоль браузера с JavaScript

Измененяем страницу через консоль браузера с JavaScript

Иногда при создании и просмотре WEB приложения может понадобиться быстро изменить или добавить какой либо элемент не изменяя html кода. Такое возможно манипулируя объектной моделью документа или DOM HTML. И сегодня мы попробуем реализовать данную возможность. Коротко DOM — это, то во что браузер преобразует наш HTML код и то с чем взаимодействует JavaScript. При открытии режима разработчика в браузере, как раз таки видимая разметка и есть DOM. И так, мы знаем что можем вставить в HTML код, какой либо скрипт. И он будет выполняться. То же самое можно сделать и через консоль. Просто обращаемся к DOM через элемент document. Для начала откроем сайт Myrusakov.ru, откроем консоль браузера, клавишей F12 или Fn+F12. Перейдем во вкладку консоль.

И начнем набирать код.


// создаем элемент списка 
let li = document.createElement('li')

// вставляем в элемент текст
li.innerHTML = ("<strong>Mysite</strong>")

// выбираем заголовок к которому подключим новый элемент
let example = document.querySelector('h2')

// вставляем в существующий элемент текст Mysite
example.appendChild(li)

Таким образом с помощью JavaScript мы добавили новый элемент на странице, не затронув сам HTML.

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

Проверьте также
Close
Back to top button