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

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

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий