CODEWITHSUNDEEP
htmlgoogle-chromedomgoogle-chrome-devtools
Ole
Ole

Reputation: 46940

Adding an element to the DOM with Chrome developer tooling?

Is it possible to add add an element to the DOM with Chrome developer tooling? For example select a div element and then add another div sibling right after it?

Upvotes: 1

Views: 844

Answers (2)

Kayce Basques
Kayce Basques

Reputation: 25907

There's 3 workflows for editing nodes as HTML:

  • Select a node so that DevTools highlights it blue. Click the More the **more icon icon next to a node then select Edit As HTML. This icon only shows up next to the currently-selected node.
  • Right-click any node (doesn't have to be the currently-selected one) then select Edit As HTML.
  • Select the node you want to edit so that DevTools highlights it blue. Then press Function+F2 (Mac) or F2 (Windows, Linux).

To commit your changes:

  • Press Command+Enter (Mac) or Control+Enter (Windows, Linux).
  • Click anywhere outside the Edit As HTML text box.

To discard:

  • Press Escape.

Source for keyboard shortcuts: Elements panel keyboard shortcuts

Upvotes: 1

Ole
Ole

Reputation: 46940

Just figured it out. We can click the three dots (...) next to an element we want to edit and select Edit as HTML, and proceed to modify the markup from there.

Added a screenshot below: enter image description here

Upvotes: 1

Related Questions