Как вставить элемент HTML в инспектор Google Chrome?

Question

Я могу дважды щелкнуть по атрибутам и изменить их в инспекторе Google Chrome. Я могу добавить CSS, я могу добавить Javascript в консоль. Но можно ли добавить HTML?

Answer 1

Щелкните правой кнопкой мыши элемент в инспекторе и выберите «Редактировать как HTML».

Затем вы можете добавить в него любой HTML-код, который вы хотите.

---

Предупреждение: это уничтожит элемент со всеми его потомками, а затем создаст их заново, как только вы закончите редактирование HTML.Любые прослушиватели событий, установленные для любого из этих элементов, больше не будут работать, и любые ссылки, которые вам могут понадобиться на любой из этих элементов, будут потеряны.

Если вам нужно сохранить элементы живыми, вам придется сделатьэто программно.После выбора элемента, который вы хотите редактировать, перейдите на консоль и программно добавьте нужный элемент. В консоли вы можете ссылаться на выбранный элемент по имени переменной $0.Например, если вы хотите добавить div к выбранному в данный момент элементу, введите его в консоли:

$0.appendChild(document.createElement('div'));