![Umar Hansa](https://web.dev/images/authors/umarhansa.jpg) Umar Hansa [X](https://twitter.com/umaar) [Homepage](https://umaar.com/)

<br />

![Duplicate DOM nodes](https://developer.chrome.com/static/blog/easily-duplicate-dom-nodes/image/duplicate-dom-nodes-0ea3244211344.gif)

**These are essentially cut/copy and paste operations.**

You can easily change the DOM without having to edit the HTML as a giant string.

1. Right click on a node and select **Copy**.
2. You can paste in your code editor, or for prototyping, you can paste the DOM node elsewhere in the DOM tree. The pasted node is inserted as a child of the currently selected node. In the video, I use the left arrow key to jump to the immediate parent opening tag and paste there (which is what I do in most cases).

You can also Cut (right click \> Cut, Cmd + x/Ctrl + x) a DOM node and paste - which has the effect of moving the node.

**Experiment:** Try adding more links in the header/footer of a site using this copy and paste technique and figure out at which point the layout needs improving.