DOM Injection

Node.clone()

Create a copy of a node. Call on the node to clone. If you want all of a node’s child nodes to also be copied, pass in true as an argument.

<div id="app" class="background" data-app>
	<h1>Hello, world!</h1>
	<p>How are you today?</p>
	Nice to see you again.
</div>

// returns <div id="app" class="background" data-app>
let app = document.querySelector('#app');

// Create a shallow clone
// returns <div id="app" class="background" data-app></div> as an empty node
let clone = app.cloneNode();

// Create a deep clone
// returns <div id="app" class="background" data-app></div> with the h1, p, and text nodes
let deepClone = app.cloneNode(true);

⏰ Preorder my new course on Web Components! Want to learn how to build Web Components from scratch, master best practices, and more? Preorder today and get $100 off of the launch price.

Find this useful? You can support my work by purchasing an annual membership.