Modern DOM manipulation made simple
It starts with .replace(): a powerful DOM diffing utility attached directly to the native HTMLElement prototype. No complex frameworks, just simple, effective tools.
document.body.replace(`
<body>
<h1>Hello World</h1>
</body>
`);Interactive Sandbox
Witness .replace() in Action
See how .replace() patches the DOM with surgical precision.
Controls
Conservation Benchmark 1000 items
How many DOM elements are preserved during an update?
| Metric (1k Items) | innerHTML | EasyJS |
|---|---|---|
| Execution Time | -- | -- |
| Elements Reused | -- | -- |
| Input Focus | -- | -- |
| Scroll Position | -- | -- |
| Event Listeners | -- | -- |
.replace() will preserve your focus and text during updates.API Reference
EasyJS is growing. Today, we present the core foundation: the replace method.
HTMLElement.prototype.replace(newContent)
Updates the element's content by smart-diffing it with the provided newContent. usage is extremely similar to React's reconciliation process but works directly on the DOM.
Parameters
- newContent String | HTMLElement
The new HTML structure you want to replace the current element with. Can be a raw HTML string or a DOM element.
How it works
- Parses the string content into valid DOM nodes.
- Compares attributes and updates only changed ones.
- Recursively updates children nodes (text and elements).
- Preserves element state where possible by mutating instead of replacing.
- Falls back to full replacement if tags differ.
Example Usage
// 1. Select your target element
const container = document.getElementById('app');
// 2. Define your new state
const newState = `
<div id="app" class="updated">
<h1>Updated Title</h1>
<p>Content updated efficiently.</p>
</div>
`;
// 3. Update effortlessly
container.replace(newState);Why use .replace()? The Hard Numbers
See the difference between brute-force updates and granular precision.
DOM Conservation
Memory Stability
Avoiding continuous object creation reduces "Garbage Collection" pauses, keeping your app buttery smooth even under heavy load.
Interactive State
Your users never lose their place. .replace() ensures continuity by preserving the state of every element it doesn't need to change.