The Ultimate
Snippet Library.

Sanitizing Input: Removing HTML Tags with Regex

Strip HTML tags from user-submitted content to prevent potential XSS vulnerabilities and clean text for display using a simple regular expression in JavaScript.

Real-time DOM Change Detection with MutationObserver

Learn how to use JavaScript's MutationObserver API to efficiently detect and react to changes in the DOM structure, attributes, or text content without polling.

Duplicating DOM Elements with cloneNode()

Learn to efficiently duplicate existing DOM elements, including their children and optionally their event listeners, using the JavaScript `cloneNode()` method for dynamic UI.

Programmatic Text Selection and Range Manipulation

Learn to programmatically select specific text, create custom ranges, and highlight content within the DOM using JavaScript's Selection and Range APIs for enhanced user interaction.

Understanding and Iterating DOM Collections: HTMLCollection vs NodeList

Master the differences between live HTMLCollection and static NodeList in JavaScript, learning efficient methods to convert them to arrays and iterate safely for robust DOM manipulation.

Accurate Element Position and Dimensions with getBoundingClientRect()

Discover how to precisely retrieve the size and position of any DOM element relative to the viewport using `getBoundingClientRect()` for dynamic layouts, overlays, and collision detection.

Retrieving and Updating Form Input Values

Learn how to efficiently get and set the current values of HTML form input fields using JavaScript for interactive forms.

Toggling Element Visibility with JavaScript Styles

Discover how to dynamically show or hide HTML elements by directly manipulating their CSS `display` property using JavaScript.

Modifying HTML Element Attributes

Dynamically change common HTML attributes like `src`, `href`, or `disabled` on elements using JavaScript's `setAttribute` and `removeAttribute` methods for interactive UIs.

Programmatically Scrolling to an Element or Page Position

Implement smooth scrolling in JavaScript to bring specific elements into view or navigate to precise pixel positions on a webpage.

Managing Plain Text Content with textContent

Safely retrieve and update the plain text content of any HTML element using the `textContent` property, a secure alternative to `innerHTML` for display text.

Dynamically Creating and Appending a New DOM Element

Learn how to create a new HTML element, set its text content and attributes, and efficiently append it to an existing parent element in the DOM using JavaScript.