Измененяем страницу через консоль браузера с 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.
